Awesome Social Media Buttons with Hover Effect using HTML & CSS

Awesome Social Media Buttons with Hover Effect using HTML & CSS


Hello developers, today in this blog you'll learn how to create Awesome Social Media Buttons with Hover Effect using HTML & CSS.

The Social Icons Widget represents small graphical buttons that are linked to your social media accounts, in any widget area of your theme. After adding links to the respective icons are automatically represented on your site, which gives your visitors to contact you through your preferred social media networks.

In this blog(Awesome Social Media Buttons with Hover Effect), there are four icons or buttons of different Social Media Networks like Facebook, Instagram, Twitter, and Youtube and when you hover on the particular button then the width of that button expands smoothly and visible the name of a particular hovered network.

The source code of this Awesome Social Media Buttons with Hover Effect using HTML & CSS is given below, and you can copy the source code of this program. You can use this code of Awesome Social Media Buttons with Hover Effect using HTML & CSS with your creativity and can take this to the next level.

Awesome Social Media Buttons with Hover Effect using HTML & CSS[Source Codes]

To make this website (Awesome Social Media Buttons with Hover Effect), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Social Media Icons | Learning Robo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <div class="wrapper"> <div class="button"> <div class="icon"><i class="fab fa-facebook-f"></i></div> <span>Facebook</span> </div> <div class="button"> <div class="icon"><i class="fab fa-instagram"></i></div> <span>Instagram</span> </div> <div class="button"> <div class="icon"><i class="fab fa-twitter"></i></div> <span>Twitter</span> </div> <div class="button"> <div class="icon"><i class="fab fa-youtube"></i></div> <span>YouTube</span> </div> </div> <div class="credit">Made with <span style="color:tomato">&#10084;</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


   
      @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
      }
      html,body{
        background-color: #85FFBD;
        background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
      }
      .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        margin-top:200px
      }
      .wrapper .button{
        display: inline-block;
        height: 60px;
        width: 60px;
        float: left;
        margin: 0 5px;
        overflow: hidden;
        background: #121;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: all 0.3s ease-out;
        color:#fff
      }
      .wrapper .button:hover{
        width: 200px;
      }
      .wrapper .button .icon{
        display: inline-block;
        height: 60px;
        width: 60px;
        text-align: center;
        border-radius: 50px;
        box-sizing: border-box;
        line-height: 60px;
        transition: all 0.3s ease-out;
      }
      .wrapper .button:nth-child(1):hover .icon{
        background: #4267B2;
      }
   
      .wrapper .button:nth-child(2):hover .icon{
        background: #E1306C;
      }
      .wrapper .button:nth-child(3):hover .icon{
        background: #1DA1F2;
      }
      
      
      .wrapper .button:nth-child(4):hover .icon{
        background: #ff0000;
      }
      .wrapper .button .icon i{
        font-size: 25px;
        line-height: 60px;
        transition: all 0.3s ease-out;
      }
      .wrapper .button:hover .icon i{
        color: #fff;
      }
      .wrapper .button span{
        font-size: 20px;
        font-weight: 500;
        line-height: 60px;
        margin-left: 10px;
        transition: all 0.3s ease-out;
      }
      .wrapper .button:nth-child(1) span{
        color: #4267B2;
      }
  
      .wrapper .button:nth-child(2) span{
        color: #E1306C;
      }
      .wrapper .button:nth-child(3) span{
        color: #1DA1F2;
      }
      .wrapper .button:nth-child(4) span{
        color: #ff0000;
      }


      
  .credit{
    text-align: center;
    margin-top: 20px;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
   
}  
We hope you would like these Awesome Social Media Buttons with Hover Effect using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating these Awesome Social Media Buttons with Hover Effect using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome