Simple Button Design Using Html & CSS in 2022

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

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


<!DOCTYPE html>
    <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=""/>
        <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>


Step 2: Create a CSS file to style your design.


    margin: 0;
    padding: 0;
	background: red;
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
    left: 50%;
    transform: translate(-50%,-50%);
ul li{
    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:


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.