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

Awesome Hover Animation on Social Media Icons using HTML & CSS

Hover Animation using only HTML & CSS.
Social Icons Widget: 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, social icons are automatically displayed on your site, letting your visitors connect with you via your chosen networks.
As you can see in the image, this is a stylish Floating Social Media Widget, which is based on only HTML & CSS. There are some social media icons like Facebook, Twitter, Instagram, Github, and YouTube. 
All icon’s background is in gradient-color that means two colors are mixed to create a background. At first, all icon’s background has been square but when you’ll hover on the particular icon the background rotates in 360 deg and the shape of background will be a circle. 

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">
    <title>Social Icons Hover Animation | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <ul class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-github"></span></a></li>
<li><a href="#"><span class="fab fa-youtube"></span></a></li>
</ul>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.icons{
  list-style: none;
}
.icons li{
  height: 70px;
  width: 70px;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
}
.icons li:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 10%;
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
  transition: all 0.3s ease-in;
}
.icons li:hover:before{
  transform: rotate(360deg);
  border-radius: 100%;
}
.icons li a span{
  font-size: 27px;
  line-height: 70px;
  color: #fff;
  transition: all 0.3s ease-out;
}
.icons li:hover a span{
  transform: scale(1.2);
}
Category :

Comments

No comments found.

Leave a Reply

Latest Posts

telegram bot

How to send message via Telegram Bot using PHP - Telegram API

Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…

SuiteCRM, an open source tool for startups to use from an early stage.

When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…

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…

%d bloggers like this: