M/s VIKASH TECH - We Write Imaginations to Codes..!!

Awesome Social Media Buttons with Hover Animation | HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Awesome Social Media Buttons with Hover Animation using only HTML & CSS.
The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically represented on your site, giving your visitors connect with you through your preferred social media networks.
In this program (Awesome Social Media Buttons with Hover Animation), at first, on the webpage, there are shown five icons or buttons of different Social Media Networks and when you hover on the particular button then the width of that button expand smoothly and visible the name of particular hovered network. This hover animation is fully created using only HTML & CSS.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Social Media Icons | VikasTech</title> -->
    <link rel="stylesheet" href="blog.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-twitter"></i></div>
<span>Twitter</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-github"></i></div>
<span>Github</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-youtube"></i></div>
<span>YouTube</span>
      </div>
</div>
</body>
</html>

CSS

@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{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.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: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):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: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #E1306C;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

How to Implement Google QAuth Authentication | Google Login - PHP MySQL

PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…

How to use Google Two Factor Authentication in your project?

At our end we take security at a priority, implementation of different ways to secure website should be the priority…

How to verify an email address before sending emails?

Email marketing is a great way to reach your clients, but while sending emails from a mail service provider, its…

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

%d bloggers like this: