Create Social Media Icon Hover Effect Button (source code)

Create Social Media Icon Hover Effect Button (source code)

In this article we create social media icon hover effect button using html and css. We use font awesome link for icon showing. We create a complete animated social media icon button.

So let’s start writing html code and create a basic structure for the social media icon button.

Html Code For Social Media Icon 

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Social Media Icon</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <ul>
        <li><a href="#"><i class="fa-brands fa-instagram instagram"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-twitter twitter"></i></a></li>
    </ul>
</body>

</html>

In this code, we create html boilerplate code, then link our css file and use font awesome for social media icons so we link CDN of font awesome👏.

50+ Frontend Project With Code

Then start with the body, we just create ul and inside ul, we create li and inside li create ahref and inside aherf we use the font, awesome icon classes.

So that’s it for html code. You can see the below 👇output with only html code.

Html Output

Create Social Media Icon Hover Effect Button (source code)

Let’s Write Css Code.

Css Code

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
}

ul {
  position: relative;
  display: flex;
}
ul li {
  position: relative;
  list-style: none;
  margin: 0 20px;
  cursor: pointer;
}
ul li a {
  text-decoration: none;
}
ul li a .fa-brands {
  font-size: 6em;
  color: #222;
}
ul li a::before {
  font-family: "FontAwesome";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 6em;
  height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}

ul li:nth-child(1) a::before {
  content: "\f16d";
  background-image: linear-gradient(45deg, 
    #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,
    #bc1888 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  border-bottom: 4px solid #dc2743;
}
ul li:nth-child(2) a::before {
  content: "\f232";
  color: #25D366;
  border-bottom: 4px solid #25D366;
}
ul li:nth-child(3) a::before {
  content: "\f099";
  color: #1DA1F2;
  border-bottom: 4px solid #1DA1F2;
}
ul li:hover a::before {
  height: 100%;
}

We start our social media icon using css, firstly we give styling in the universal selector. Then style body tag with basic styling, after that we style ul, li, a tag.

Then style every social media icon. Then we give before selector in a tag so before hovering on icon what happens. So that’s it all for our css code.

You can see the below👇 output with Html And Css Code.

Create Social Media Icon

You can see in the screenshot and video output how attractive our social media icon hover effect when we hover on the icon a vertical line comes to the bottom and the icon shows in Colorful❤💛💚💙💜.

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Nick

written by – Codewithrandom

Share on:

Leave a Comment