MASIGNASUKA101
3757417361466409779

3D Social Media Buttons Using Simple HTML and CSS Code

3D Social Media Buttons Using Simple HTML and CSS Code
Add Comments
Friday, January 1, 2021
3D Social Media Buttons Using Simple HTML and CSS Code

Hello friends, in this article I have shown you how to easily create 3D social media buttons using simple HTML and CSS programming code. This type of button can be noticed in a lot of websites nowadays to increase the quality and beauty of the website. 3D buttons are much more attractive than normal distribution so such buttons have gained a lot of popularity nowadays. 

In this article, I have made 4 social media buttons. Here I have tried to explain to you step by step how these are made and what kind of programming code is used to make them. Earlier I shared with you how to make different types of social media buttons. Hope you like these buttons. 3d is a type of modern design consisting of three dimensions. It is much clearer and brighter than the two dimensions. These social media buttons have been designed with different colors and hover animations have been added.

Video tutorial on making social buttons

The following video will completely help you to create these icons on social media. If you want to know step by step, you must watch this video.


 Hopefully, you have learned how to make these buttons from the video above. Below I have basically shown how it is built step by step using programming code. Hopefully, the tutorial below will help you to increase your knowledge of HTML and CSS programming.

Related posts for you

Step by step tutorial on creating 3D social buttons

 To create these social media buttons, you can download the required HTML and CSS code for free by clicking on the download button above. Copy the structure below and add it to your HTML file. The following instructions give complete instructions on where to add HTML and CSS code. You add HTML and CSS codes accordingly. 

If you want to know how to make it step by step and want to know which programming code has been used to make which element. However, follow the tutorial below.


Create 4 buttons

The following programming has been used to create these buttons. These are the HTML programming codes that make up the 4 social icons and text here.

<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>

 

Create 4 buttons


Make the links and text beautiful

The following programming codes basically make the text and links beautifully colorful.

body{
    margin0;
    padding0;
    background#ccc;
    font-family'roboto condesed'sans-serif;
}
ul{
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    displayflex;
    margin0;
    padding0;
ul li{
    list-stylenone;
    margin0 5px;
}


Make the links and text beautiful


Turn the links into buttons

These codes have helped to make the links into buttons and to design them.

ul li a .fa{
    font-size40px;
    color#262626;
    line-height80px;
    transition0.5s;
    padding-right14px;
}
ul li a span{
    padding0;
    margin0;
    positionabsolute;
    top30px;
    color#262626;
    letter-spacing4px;
    transition0.5s;
}
ul li a {
    text-decorationnone;
    display:absolute;
    display:block;
    width:210px;
    height:80px;
    background#fff;
    text-align:left;
    padding-left20px;
    transformrotate(-30degskew(25degtranslate(0,0);
    transition:.5s;
    box-shadow-20px 20px 10px rgba(0,0,0,.5);
  }
  ul li a:before {
    content'';
    positionabsolute;
    top:10px;
    left:-20px;
    height:100%;
    width:20px; /*position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: flex;margin: 0;padding: 0;*/
    background#b1b1b1;
    transform.5s;
    transformrotate(0degskewY(-45deg);
  }
  ul li a:after {
    content'';
    positionabsolute;
    bottom:-20px;
    left:-10px;
    height:20px;
    width:100%;
    background#b1b1b1;
    transform.5s;
    transformrotate(0degskewX(-45deg);
  }
  ul li a:hover{
      transformrotate(-30degskew(25degtranslate(20px-15px);
      box-shadow-50px 50px 50px rgba(0,0,0,.5);
  }
 
  ul li:hover .fa{
color#fff;
  }
  ul li a:hover span{
      color#fff;
  }


Turn the links into buttons


Make it animated

The following codes make these buttons animated and colorful. Here different colors are used for each composition. Here you can change the color of your choice if you want.

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

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


Make it animated

Hopefully, the other tutorial has helped you to create this social media button. If you have any difficulty in understanding the tutorial above, you can watch the video above. If there is any problem, you can comment and ask. 

You can watch the live demo of these buttons by clicking on the demo link above. You can also download the required code for free by clicking on the download button above. Special thanks to you for reading to the end of the article.