CSS 3D Button with Hover Effect
Tags: css, webdev, beginners, tutorial
Published: 2022-08-08 02:29:56

A basic 3D css button with simple hover effect. 

For More Code Examples Visit here - [link](https://xcattx.com/css-3d-buttons/)

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

```html
<!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.

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

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

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

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

```css
@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.

```css
body{
   background-color: #ededed;
   height:100%;
   display:table;
   width:100%;
   text-align:center;
}
```
Style the Div container. 

```css
.table_center{
  display:table-cell;
  vertical-align: middle;
}
```
Now style the regular button.

```css
 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.

```css
 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.

```css
a:hover{
  background-color: transparent;
}
 a:hover:after{
  background-color: #f6d51e;
}
```
Finish with Active Selector.

```css
 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. 

```html
<!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>
```

The output - 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w871c2iig7z5socztw4o.gif)