Creating Animated Social Media Icons

Hey Folks, in this article, we will show you how to create Animated web-based(Social) media icons using HTML and CSS.
Before creating lets know what are these and where to use it.

What are Social Media Icons?

Social media icons are used to provide your audience with a way to connect with your brand on various social media platforms. This is why these icons should always link back to your company's account on a specific platform, rather than the home page itself.
You'll need to include social media icons in your marketing materials to let people know where to follow you. ... Despite the ubiquity of icons in all shapes, colors and sizes online, social media icons are registered trademarks. They are protected by copyright and enforceable brand guidelines.

Creating with HTML

Here I am using Font awesome icons so I have to include CDN of font awesome in header. You can use others icons to create. It's optional depends you. But you have to include any one of them. You can see the Font Awesome CDN link below.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

After this let's create div box using <div> tag. I used two div elements with different class selectors for styling. one class is "ct icons" and another one is "social-icons". We are using <i> (italic) tag to acces the font awesome icons.

HTML Code:

<div class="cticons">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-telegram"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>

In the code you can see href="#", here you have to just replace the "#" with your social media platform links.

Styling with CSS

Here we are using internal CSS in a HTML document. We are important "Poppins" font using CSS. We can import through a link also as we imported font awesome icons CSS document. we are styling the icons as buttons using basic CSS and selectors like ::before, ::after, :hover. You can see the code below.

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.cticons{
  margin: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.social-icons {
  display: flex;
}
.social-icons a {
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: #000;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
  margin: 0 5px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s;
}
.social-icons a .fa {
  font-size: 20px;
  line-height: 50px;
  position: relative;
  z-index: 10;
  transition: color 0.5s;
}
.social-icons a::after {
    content:"";
    position:absolute ;
    top:-12px;
    left:-20px;    
    border:20px solid #E91E63;
    border-radius:50%;
    z-index:-1;
    transition:3s ease-in-out transform;
    background: #fff;
    background: linear-gradient(-45deg, #ed1c94, #ffec17);
}

.social-icons a::before {
    content:"";
    position:absolute ;
    top:-28px;
    left:-28px;
    width:224px;
    height:224px;
    border:12px solid #03A9F4;
    border-left-color:white;
    border-radius:50%;
    z-index:-1;
    transition:1s ease-in-out transform .5s;
}
.social-icons a:hover::after {
    top: 0;
}
.social-icons a:hover .fa {
    color: #fff;
    font-size: 30px;
}
.social-icons a:hover {
  transform: translateY(-10px);
}
a:hover::after{
    transform:rotate(360deg);
    width: 60px;
    height: 60px;
}
a:hover::before{
    transform:rotate(360deg);
}

The ::before selector inserts something before the content of each selected element(s).

The ::after selector inserts something After the content of each selected element(s).

The :hover selector is used to select elements when you mouse over them.

Full Code:

<!DOCTYPE html>
<html>
<head>
	<title>Social Media Icons</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.cticons{
  margin: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.social-icons {
  display: flex;
}
.social-icons a {
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
  color: #000;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
  margin: 0 5px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s;
}
.social-icons a .fa {
  font-size: 20px;
  line-height: 50px;
  position: relative;
  z-index: 10;
  transition: color 0.5s;
}
.social-icons a::after {
    content:"";
    position:absolute ;
    top:-12px;
    left:-20px;    
    border:20px solid #E91E63;
    border-radius:50%;
    z-index:-1;
    transition:3s ease-in-out transform;
    background: #fff;
    background: linear-gradient(-45deg, #ed1c94, #ffec17);
}

.social-icons a::before {
    content:"";
    position:absolute ;
    top:-28px;
    left:-28px;
    width:224px;
    height:224px;
    border:12px solid #03A9F4;
    border-left-color:white;
    border-radius:50%;
    z-index:-1;
    transition:1s ease-in-out transform .5s;
}
.social-icons a:hover::after {
    top: 0;
}
.social-icons a:hover .fa {
    color: #fff;
    font-size: 30px;
}
.social-icons a:hover {
  transform: translateY(-10px);
}
a:hover::after{
    transform:rotate(360deg);
    width: 60px;
    height: 60px;
}
a:hover::before{
    transform:rotate(360deg);
}

</style>
</head>
<body>
            
<div class="cticons">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-telegram"></i></a>
<a href="#"><i class="fa fa-github"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
</div>
</div>

</body>
  </html>

CodePen Output:

See the Pen Social Media Icons by Coding Taggers (@codingtaggers) on CodePen.

Coding Taggers

Search this blog