reply View all Tutorials & Projects

How to Create 3D Buttons with HTML & CSS

It's super easy to style 3D buttons using CSS - in this video we'll a look at how to do just that. This will work for both anchor (<a>) tags, and button (<button>) tags.

Video Tutorial

Source Code

You can find the source code for this video below.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>3D Buttons with CSS</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Boogaloo&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<a href="#" class="button">SEE MORE</a>
	<button type="button" class="button button--secondary">CONTACT US</button>
	<button type="button" class="button button--tertiary">GALLERY</button>
</body>
</html>
main.css
html {
	background: orange;
	margin: 25px;
}

.button {
	--background-color: #005aff;
	--background-color-dark: #002d81;

	display: inline-block;
	margin: 0 8px;
	padding: 10px 16px;
	font-family: 'Boogaloo', cursive;
	font-size: 24px;
	color: #ffffff;
	text-decoration: none;
	border: none;
	outline: none;
	cursor: pointer;
	background-color: var(--background-color);
	box-shadow: 6px 6px 0 var(--background-color-dark);
}

.button:active {
	transform: translateX(2px) translateY(2px);
	box-shadow: 4px 4px 0 var(--background-color-dark);
}

.button--secondary {
	--background-color: #FF00DA;
	--background-color-dark: #840070;
}

.button--tertiary {
	--background-color: #19E633;
	--background-color-dark: #007d11;
}

If you have any questions about this code, please leave a comment on the video.