Awesome SOCIAL MEDIA ICON Button Hover Effects Using Only HTML & CSS @informativeworld713

Learn Awesome SOCIAL MEDIA Button Hover Effects Using Only HTML & CSS @informativeworld713. Animation Tutorial For Beginners to Advance in Hindi/Urdu: In this CSS3 tutorial in Hindi/Urdu we will learn everything you need to learn about CSS from scratch. #css #css3 #css3html5 #css3tutorial #csshovereffect #css3animation #html #html5 #htmltutorial #htmlcss2021

In today’s digital age, social media has become an integral part of our lives. Whether it’s connecting with friends and family, staying updated with the latest news, or promoting our businesses, social media platforms offer endless possibilities. As website owners and developers, it’s important to make our websites more engaging and interactive to attract and retain users.

One way to achieve this is by incorporating eye-catching social media buttons with hover effects. In this blog post, we will explore how to create awesome social media button hover effects using only HTML.

Getting Started

To begin, we need a basic understanding of HTML. HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It provides the structure and content of a webpage, allowing us to define headings, paragraphs, links, images, and more.

Before we dive into the code, let’s decide which social media platforms we want to include in our hover effects. Some popular options include Facebook, Twitter, Instagram, LinkedIn, and Pinterest.

Creating the HTML Structure

First, let’s create the basic HTML structure for our social media buttons. We’ll use unordered lists to organize our buttons. Each list item will represent a social media platform.

<ul class="social-media-buttons">
  <li><a href="#"><i class="fab fa-facebook"></i></a></li>
  <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  <li><a href="#"><i class="fab fa-instagram"></i></a></li>
  <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fab fa-pinterest"></i></a></li>

In the above code snippet, we have created an unordered list with the class name ‘social-media-buttons’. Each list item contains an anchor tag with a Font Awesome icon representing a social media platform. We have used the ‘fab’ class to specify that these icons are from the Font Awesome library.

Adding CSS Styles

Now that we have the HTML structure in place, let’s add some CSS styles to create the hover effects. We’ll use CSS transforms and transitions to achieve the desired effects.

.social-media-buttons li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 24px;
  margin-right: 10px;
  background-color: #333;
  transition: all 0.3s ease-in-out;

.social-media-buttons li a:hover {
  transform: rotate(360deg);
  background-color: #55acee;

In the above code snippet, we have defined styles for the social media buttons and their hover effects. The ‘display: inline-block’ property allows the buttons to be displayed horizontally. We have set a fixed width and height for the buttons and applied a border-radius of 50% to make them circular. The ‘text-align: center’ property centers the icons within the buttons, and the ‘line-height: 50px’ property vertically aligns the icons. We have also specified the font size, color, and background color for the buttons.

When the buttons are hovered over, we apply a ‘rotate(360deg)’ transform to create a spinning effect. We also change the background color to a different shade.


By following the steps outlined in this blog post, you can create awesome social media button hover effects using only HTML. These hover effects will make your website more visually appealing and encourage users to engage with your social media profiles.

Remember to customize the HTML structure and CSS styles to match your website’s design and branding. Experiment with different hover effects and share your creations with the web development community.


Watch Our More Videos On YouTube

<link rel="stylesheet" href="" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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>
        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%;

Leave a Reply

Your email address will not be published. Required fields are marked *