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

Last tutorial we made a 3d button with Html and Css 3D Button with Html and Css (Part-1).

Now we create another 3d button 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 Number 3 with Html and Css</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=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></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: #c8c8c8;
}
ul{
 position: absolute;
 display: flex;
 margin: 0;
 padding: 0;
 top:50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
ul li{
 list-style:none;
 margin: 0 20px;
}
ul li a{
 text-decoration: none;
 display: block;
 position: relative;
 height: 60px;
 width: 60px;
 background: linear-gradient(0deg, #ddd, #fff);
 text-align: center;
 border-radius: 50%;
 box-sizing: border-box;
 padding: 6px;
 box-shadow: 0 10px 15px rgba(0,0,0,.3);
 transition: .5s;
}
ul li a .fa{
 display: block;
 height: 100%;
 width: 100%;
 border-radius: 50%;
 background: linear-gradient(0deg, #fff, #ddd);
 font-size: 24px;
 color: #282923;
 line-height: calc(54px - 6px);
}

ul li a:hover{
 box-shadow: 0 2px 5px rgba(0,0,0,.3);
}

ul li:hover:nth-child(1) a .fa{
 color: #3b5999;
}
ul li:hover:nth-child(2) a .fa{
 color: #55acee;
}
ul li:hover:nth-child(3) a .fa{
 color: #dd4b39;
}
ul li:hover:nth-child(4) a .fa{
 color: #e4405f;
}
ul li:hover:nth-child(5) a .fa{
 color: #0077B5;
}

Tutor: Rakib Alom

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

2 Comments

Contact Form