How to Create 3D Button in HTML & CSS?

Creating an HTML button using Cascading Stylesheet (CSS) can be one of the easiest but the trickiest task, especially if you are new to HTML and CSS. HTML button tag can easily create a button with a single line of code:

<button type="button">Click Me!</button>

You can also use <a> tag that defines hyperlink. So the above code can also be written as:

<a type="button">Click Me!</a>

The button tag defines a simple clickable button. Inside a button element, you just need to set attribute i.e., type="button", that will define an HTML button.

Well, we are here learn 3D button using one line of HTML code and few lines of simple Cascading Stylesheet (CSS). So, How to Create 3D Button in HTML-CSS?

Contents hide

Steps to Create 3D Button in HTML CSS

Step 1: The HTML

Step 2: The Cascading Stylesheet (CSS)

Button Demo

Share this post:

Steps to Create 3D Button in HTML CSS

Step 1: The HTML

Take an anchor tag i.e., a which defines a hyperlink, which will link some page or content when the button is clicked. Here, “half” is an attribute that will link our button to some page or content.
Now, we will name our button to “3D Button” before the closing of the anchor tag.

<a href="#">3D Button</a>

Step 2: The Cascading Stylesheet (CSS)

Now, we need to apply CSS to the HTML code that we wrote. Below is a CSS code for the hyperlink (button):

a {
position: relative;
color: #fff;
text-decoration: none;
background-color: #0094ff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
font-size: 40px;
display: block;
padding: 4px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
-webkit-box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
-moz-box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
margin: 100px auto;
text-align: center;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
}

Once, the style is applied to the HTML hyperlink or button, we need to apply :active CSS pseudo-class to the hyperlink (button). Have a look at the :active state code below:

a:active {
position: relative;
top: 6px;
-webkit-box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
-moz-box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
}

Here is the complete source code of the button. You can modify the look and feel as per your requirement. Just copy and paste the below code and save it as an HTML file.

<html>
<head>
<title>3D Buttons</title>
<style type="text/css">
a {
position: relative;
color: #fff;
text-decoration: none;
background-color: #0094ff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
font-size: 40px;
display: block;
padding: 4px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
-webkit-box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
-moz-box-shadow: 0px 10px 0px #1672b5, 0px 10px 30px #1672b5;
margin: 100px auto;
text-align: center;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
}

a:active {
position: relative;
top: 6px;
-webkit-box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
-moz-box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
box-shadow: 0px 3px 0px #095e9c, 0px 9px 25px #095e9c;
}
</style>
</head>

<body>
<a href="#">3D Button</a>
</body>
</html>