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=""><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-linkedin"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></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: #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
Good Post...
ReplyDeletegood post...
ReplyDelete