How to create social stylish buttons with HTML and CSS3

You can use these buttons to make your website beautiful. Below is the button’s style code on how to use them.

In this article, I have provided a step-by-step guide on how to accomplish this for your own website social button.

HTML Code

<!-- DESIGN EFFICET -->
<section class="design-section">
    <div class="container">
        <div class="box-1">
            <ul class="icon">
                <li>
                    <a href="#">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span><i class="fa fa-facebook"></i></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span><i class="fa fa-twitter"></i></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span><i class="fa fa-linkedin"></i></span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span><i class="fa fa-instagram"></i></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- DESIGN EFFICET -->

 

CSS Code

/*
DEFAULT STYLE
==========================*/
.design-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.box-1 {
    max-width: 482px;
    margin: auto;
}
.icon {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
}
.icon li {
    position: relative;
    padding: 0;
    margin: 0;
    height: 60px;
    width: 60px;
    margin: 0 30px;
    transform: rotate(-30deg) skew(25deg);
    background-color: beige;


}
.icon span{
    position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   color: #fff;
   transition: 0.5s;
   display: flex;
   align-items: center;
   justify-content: center;
   font: 30px; 

}
.icon li:hover span:nth-child(5)
{
    transform: translate(40px,-40px);
    opacity: 1;
}
.icon li:hover span:nth-child(4)
{
    transform: translate(30px,-30px);
    opacity: .8;
}
.icon li:hover span:nth-child(3)
{
    transform: translate(20px,-20px);
    opacity: .6;
}
.icon li:hover span:nth-child(2)
{
    transform: translate(10px,-10px);
    opacity: .4;
}
.icon li:hover span:nth-child(1)
{
    transform: translate(0,0);
    opacity: .2;
}

This button referral link:

https://codepen.io/kripashsarkar/pen/BamQXyZ