Simple Button Design Using Html & CSS in 2021

  • Share this:
Simple Button Design Using Html & CSS in 2021

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
3d Button Number 3 with Html and Css

About author
I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.