CSS 3D Button with Hover Effect

#css #webdev #beginners #tutorial

A basic 3D css button with simple hover effect.

For More Code Examples Visit here - link

To create the 3d button first start with the basic html format -

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  </style>
</head>
</body>
</html>

Inside body create a new div with class "table_center", this container will be used to center the button to the middle of the screen.

<div class="table_center"></div>

Inside the div create an "a" tag. This will be the button.

  <div class="table_center">
       <a href="#">click</a>
  </div>

Now Comes the styling part, first remove the default styling and import the google font.

@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

Style the body.

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}

Style the Div container.

.table_center{
  display:table-cell;
  vertical-align: middle;
}

Now style the regular button.

 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}

Giving a click effect to the button after it gets clicked.

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}

Giving it a simple hover effect.

a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}

Finish with Active Selector.

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}

That's it, the CSS 3D Button with Click effect and Hover Effect is ready.

Copy the full code and run it for the output.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

html{
   height:100%;
   width:100%;
}

html, body{
  padding: 0;
  margin: 0;
  font-family: 'Raleway', sans-serif;
}

body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}

.table_center{
  display:table-cell;
  vertical-align: middle;
}
 a{
  text-decoration:none;
  color:#000;
  margin:auto;
  width:150px;
  display:inline-block;
  line-height:40px;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  background-color: #fff;
   border:5px solid #000;
   box-shadow:1px 1px 0, 2px 2px 0, 3px 3px 0, 4px 4px 0,5px 5px 0;
  position: relative;
}

 a:after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width:100%;
   z-index: -1;
  background-color: #fff;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}
a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}
</style>
</head>
<body>
  <div class="table_center">
       <a href="#">
         click
       </a>
</div>
</body>
</html>