How To Create 3D Social Media Buttons Using HTML and CSS

Hello, friends in this article I will show you how to create 3D social media buttons using HTML and CSS programming code. Here I have created 4 social media buttons which are made up of three complete dimensions. HTML code has been used to structure them and CSS programming code has been used to design them. These buttons are made by hover. When someone clicks on the buttons or moves the mouse over them, the buttons will rise slightly above normal and change color. Different colors have been used for each button.

Demo: Click Here


Download: Click Here


You can watch the live demo by clicking on the demo button below. You can also use the download link above to download the required source codes for free.
Below are the programming codes for making it. You can easily make it using those.

HTML Code

<ul>
        <li>
            <a href="#"> 
            <i class="fa fa-facebook" aria-hidden="true"></i>
             <span> -Facebook</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <span> -Twitter</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-google-plus" aria-hidden="true"></i>
                <span> -Google</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <span> -Instagram</span>
            </a>
        </li>
    </ul>

CSS Code

/*add css code*/
body{
    margin: 0;
    padding: 0;
    background: #ccc;
    font-family: 'roboto condesed', sans-serif;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
} 
ul li{
    list-style: none;
    margin: 0 5px;
}
ul li a .fa{
    font-size: 40px;
    color: #262626;
    line-height: 80px;
    transition: 0.5s;
    padding-right: 14px;
}
ul li a span{
    padding: 0;
    margin: 0;
    position: absolute;
    top: 30px;
    color: #262626;
    letter-spacing: 4px;
    transition: 0.5s;
}                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);ul li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
ul li a {
    text-decoration: none;
    display:absolute;
    display:block;
    width:210px;
    height:80px;
    background: #fff;
    text-align:left;
    padding-left: 20px;
    transform: rotate(-30deg) skew(25deg) translate(0,0);
    transition:.5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
  }
  ul li a:before {
    content: '';
    position: absolute;
    top:10px;
    left:-20px;
    height:100%;
    width:20px;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewY(-45deg);
  }
  ul li a:after {
    content: '';
    position: absolute;
    bottom:-20px;
    left:-10px;
    height:20px;
    width:100%;
    background: #b1b1b1;
    transform: .5s;
    transform: rotate(0deg) skewX(-45deg);
  }

    ul li a:hover{
      transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
      box-shadow: -50px 50px 50px rgba(0,0,0,.5);
  }                                                                                               /*ontent: '';position: absolutetop:1left:-20height:10width:2background: #b1b1transform: transform: rotate(0deg) skewY(-45deg);ul li a:after {connt: ''position: absolute;bottom:-20pxleft:-10px;height:20px*/
  ul li:hover .fa{
color: #fff;
  }
  ul li a:hover span{
      color: #fff;
  }

  ul li:hover:nth-child(1) a{
      background: #3b5998;
  }
  ul li:hover:nth-child(1) a::before{
      background: #365492;
  }
  ul li:hover:nth-child(1) a::after{
    background: #4a69ad;
}
/*2nd*/

ul li:hover:nth-child(2) a{
    background: #00aced;
}
ul li:hover:nth-child(2) a::before{
    background: #097aa5;
}
ul li:hover:nth-child(2) a::after{
  background:#53b9e0;
}
/* 3rd button*/
ul li:hover:nth-child(3) a{
    background: #dd4b39;
}
ul li:hover:nth-child(3) a::before{
    background: #b33a2b;
}
ul li:hover:nth-child(3) a::after{
  background:#e66a5a;
}
/* 4th botton*/
ul li:hover:nth-child(4) a{
    background: #e4405f;
}
ul li:hover:nth-child(4) a::before{
    background: #d81c3f;
}
ul li:hover:nth-child(4) a::after{
  background:#e46880;
}

Comments

[Cornea Florin]

Nice!!, looks pretty cool!

[Anita Maity]

Thank You, Cornea Florin