DEV Community

Its Aomi
Its Aomi

Posted on

CSS 3D Button with Hover Effect

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

  <div class="table_center">
       <a href="#">click</a>
  </div>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Style the body.

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

Style the Div container.

.table_center{
  display:table-cell;
  vertical-align: middle;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Giving it a simple hover effect.

a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}
Enter fullscreen mode Exit fullscreen mode

Finish with Active Selector.

 a:active{
   top:5px;
   left:5px;
   box-shadow:0 0 0 0;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The output -

Image description

Top comments (4)

Collapse
 
kartjim profile image
kart jim

很好看!感谢分享!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool button.

Collapse
 
miionu profile image
Rospars Quentin

Cool effect. Thanks for sharing!

Collapse
 
altpano profile image
Alt Pano

Nice