How to create round social media icons/ buttons?

Demo:

To learn how to style the round social media icons/ buttons follow the steps below:

Step1.

Add HTML

Create the social media icons that you want to style:

<a href="#" class="fab fa-codepen"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-facebook"></a>
<a href="#" class="fab fa-tiktok"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-youtube"></a>
<a href="#" class="fab fa-pinterest"></a>
<a href="#" class="fab fa-snapchat-ghost"></a>
<a href="#" class="fab fa-skype"></a>
<a href="#" class="fab fa-dribbble"></a>
<a href="#" class="fab fa-yahoo"></a>

Step2.

Add CSS

Import the font-awesome font:

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

Style the icons. Add border-radius: 50%; to create the round shape of the button and reduce the width to 30px:

.fab {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  transition: transform .2s;
  border-radius:50%;
}

.fab:hover {
  transform: scale(1.2);
}
.fa-codepen {
  background-color: #000;
  color: white;
}
    
.fa-instagram {
  background-color: #f72585;
  color: white;
}
    
.fa-facebook {
  background-color: #3B5998;
  color: white;
}
    
.fa-tiktok {
   color: white;
   background-color: #000;
    }

.fa-twitter {
  background-color: #55ACEE;
  color: white;
}

.fa-linkedin {
  background-color: #007bb5;
  color: white;
}

.fa-youtube {
  background-color: #bb0000;
  color: white;
}

.fa-pinterest {
  background-color: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background-color: #00aff0;
  color: white;
}

.fa-dribbble {
  background-color: #ea4c89;
  color: white;
}

.fa-yahoo {
  background-color: #430297;
  color: white;
}

To see how to create the rectangle social media icons/buttons click here.

Enjoy coding!

Share this: