3D Button with Html and Css (Part-1)

Rakib Alom -
1

Now we make a 3d and responsive button hover with Html and Css. First you create a html file which name is "index.html" , then open this file with your editor. Now you 
download font-awesome file from google (download link font-awesome ) or collect this file anyway. Now edit your html code -

<!DOCTYPE html>
<html>
<head>
<title>3D Button Hover</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
<ul>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
</ul>
</body>
</html>


Now you create a css file which name is "style.css" and open with your editor. Then edit your css code-

body{
margin: 0;
padding: 0;
background-color: #ccc;
}
ul{
position:absolute;
display: flex;
top:50%;
left: 50%;
 margin:0;
 padding:0;
transform: translate(-50%, -50%);
transition: .5s;
}
ul li{
list-style: none;
margin: 0 40px;
}
ul li a .fa{
font-size: 40px;
color: #56a79a;
line-height: 80px;
transition: .5s;
}
ul li a{
position: relative;
display: block;
width: 80px;
height: 80px;
text-align: center;
background-color: #ffffff;
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
box-shadow: -20px 20px 10px rgba(0,0,0,.5);
transition: .5s;
}
ul li a:before{
content: '';
position: absolute;
top: 10px;
left: -20px;
height: 100%;
width: 20px;
transform: rotate(0deg) skewY(-45deg);
background-color: #e8e8e8;
}
ul li a:after{
content:'';
position: absolute;
bottom: -20px;
left: -10px;
height: 20px;
width: 100%;
transform: rotate(0deg) skewX(-45deg);
background-color: #e8e8e8;
}
ul li a:hover{
transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px, -20px);
box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
ul li:hover a .fa{
color: #fff;
}
ul li:hover:nth-child(1) a{
background-color: #0d47a9;
}
ul li:hover:nth-child(1) a:before{
background-color: #174BA4;
}
ul li:hover:nth-child(1) a:after{
background-color: #174BA4;
}
ul li:hover:nth-child(2) a{
background-color: #2196f3;
}
ul li:hover:nth-child(2) a:before{
background-color: #3590D9;
}
ul li:hover:nth-child(2) a:after{
background-color: #3590D9;
}
ul li:hover:nth-child(3) a{
background-color: #d84315;
}
ul li:hover:nth-child(3) a:before{
background-color: #E54B1A;
}
ul li:hover:nth-child(3) a:after{
background-color: #E54B1A;
}
ul li:hover:nth-child(4) a{
background-color: #ad1457;
}
ul li:hover:nth-child(4) a:before{
background-color: #BB225E;
}
ul li:hover:nth-child(4) a:after{
background-color: #BB225E;
}
ul li:hover:nth-child(5) a{
background-color: #282923;
}
ul li:hover:nth-child(5) a:before{
background-color: #30312B;
}
ul li:hover:nth-child(5) a:after{
background-color: #30312B;
}


Tutor: Rakib Alom
Tags:

1 Comments

Previous Post Next Post