How to Create 3D Button in HTML & CSS?

Table of Contents

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 being new to CSS. HTML button tag can easily create a button with a single line of code:

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

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 line of simple Cascading Stylesheet (CSS). So, How to Create 3D Button in HTML-CSS?

Step 1: The HTML

  1. 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.
  2. 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>

Button Demo

See the Pen 3D Button by Rajesh Rai (@WebsiteVidya) on CodePen.

Do put your views in the comment section below and please share this post if you liked! Thanks for reading!

Tags:, ,

Send this to a friend