I hope everyone is well and enjoys learning web design. Last time we make a calculator with HTML, CSS & JavaScript. If you new here then go to and make a calculator from this link and follow coding.
Now we will design a CSS button using Html and CSS. You have to need to create an HTML and a CSS file. So let's go -
Step 1: Create an HTML file
index.html
<!DOCTYPE html>
<html>
<head>
<title>3d Button Number 3 with Html and Css</title>
<link rel="stylesheet" type="text/css" href="button1.css">
<!-- font-awesome css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
Step 2: Create a CSS file to style your design.
style.css
body{
margin: 0;
padding: 0;
background: red;
}
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;
}
Enjoy your coding and follow us to learn more...
Github Code: https://github.com/RakibAlom/css-button-one
Tutor: Rakib Alom
Preview of Coding
(1)
Login first for like post.
Comments (0)