Simple Social Media Icons Hover Effect with CSS

Simple Social Media Icons Hover Effect with CSS

Social Media Icons hover effect

This is a CSS tutorial where you will learn how to create simple social media icons with a hover effect. The hover or animation effect makes the social button much more interesting. Here a few CSS social buttons have been created and hover colors have been used in them.

Social icons are a common element among different websites or projects. The social media buttons that have been created here use animated hover colors.

Social Media Icons hover effect

This social icon hovers effect is made using only HTML and CSS you can use anywhere. I have added icons using HTML. These social icons have been designed and hovered using CSS.

See the Pen
Social Icon Hover Effect by Shantanu Jana (@shantanu-jana)
on CodePen.

This is a complete tutorial where you can get all the source code, step-by-step tutorials, and live previews. So if you are a beginner then this tutorial will help you a lot. If you want to see the preview then use the demo section above.

Create a Social Media Buttons with CSS

Here five hover effect social icons are used and they are given in the form of a round button. 

Now if you want to make it, you need to have some idea about HTML and CSS. If you are not technical then use the download button directly below the article.

Step 1: HTML code of Social Icons

All social icons have been added by the following HTML code. Here I have used 5 social icons.

<div class=”social-icons”>
   <a class=”social-icon twitter” href=”#”>
      <i class=”fab fa-twitter”></i>
   </a>
   <a class=”social-icon dribbble” href=”#”>
      <i class=”fab fa-dribbble”></i>
   </a>
   <a class=”social-icon facebook” href=”#”>
      <i class=”fab fa-facebook-f”></i>
   </a>
   <a class=”social-icon instagram” href=”#”>
      <i class=”fab fa-instagram”></i>
   </a>
   <a class=”social-icon github” href=”#”>
      <i class=”fab fa-github”></i>
   </a>
</div>

Step 2: Basic design of webpage by CSS

Now the basic design of the webpage has been done with some CSS.

:root {
  –link-size: 64px;
  –trans-property: all 0.3s ease;
}
body {
  margin: 0;
  padding: 0;
  background: #fafafa;
}
.social-icons {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
Basic design of webpage by CSS

Step 3: Design Social Media Icons

Now the social icons have been designed and shaped like a button. The width and height of the buttons are 75px, the background color is white and shadows have been used around the buttons. Border-radius: 50% is used to round the buttons.

.social-icon {
  display: flex;
  position: relative;
  overflow: hidden;
  width: var(–link-size);
  height: var(–link-size);
  margin: 8px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  transition: var(–trans-property);
}
.social-icon i {
  margin: auto;
  font-size: 24px;
  color: #67798e;
  z-index: 1;
  transition: var(–trans-property);
}
css Social Media Icons

Step 4: Add ‘: after’ effects to icons

Now the ‘: after’ effect has been used in the buttons. Animation has been added by this after effect. Then there is a different background color for each button.

.social-icon:after {
  content: “”;
  width: var(–link-size);
  height: var(–link-size);
  position: absolute;
  transform: translate(0, var(–link-size));
  border-radius: 50%;
  transition: var(–trans-property);
}
.social-icon.twitter:after {
  background-color: #1da1f2;
}
.social-icon.github:after {
  background-color: #24292e;
}
.social-icon.dribbble:after {
  background-color: #ea4c89;
}
.social-icon.instagram:after {
  background-color: #5851db;
}
.social-icon.facebook:after {
  background-color: #1769ff;
}

Step 5: Add hover effect in Social Media Icons

Now the hover effect has been added to the social button. Here hover effect is used between both button and icon.

.social-icon:hover {
  transform: translateY(-4px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
}
.social-icon:hover i {
  color: #fff;
}
.social-icon:hover:after {
  transform: translate(0) scale(1.2);
}
Social Media Icons Hover Effect

Hopefully, Social Media Icons have been able to create a hover effect using the code above. If there is any problem, you can let us know by commenting. Be sure to comment on how you like these CSS Social Media Buttons.