Creating circled buttons on hover with HTML and CSS

For a menu or to encourage your readers to share your website, share buttons are essential elements to add to your website. Let's find out how to make them more modern with a "neon" effect that will surround the icon selected by your user.

Louis-Nicolas Leuillet

Updated on December 9, 2024

For a menu or to encourage your readers to share your website, share buttons are essential elements to add to your website. Let’s discover how to make them more modern with a "neon" effect that will surround the icon selected by your user.

Step 1

Let's start by including Font Awesome 5.

HTML

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

Step 2

Let's move on to the HTML code.

HTML

<div class="main center">
  <div class="icon center">
    <i class="fab fa-facebook fa-2x"></i>
  </div>
  
  <div class="icon center">
    <i class="fab fa-instagram fa-2x"></i>
  </div>
  
  <div class="icon center">
    <i class="fab fa-whatsapp fa-2x"></i>
  </div>
  
  <div class="icon center">
    <i class="fab fa-twitter fa-2x"></i>
  </div>
</div>

Thanks to the Font Awesome library we added in the first step, each class starting with “fa” will be retrieved and transformed into an icon.

The fa-2x class allows doubling the size of the icon.

You can find all available icons on fontawesome.com/icons.

Step 3

Let's style the main class and the icons.

CSS

.main {
  height: 100vh;
}

.icon {
  width: 65px;
  height: 65px;
  margin: 20px;
  cursor: pointer;
  border-radius: 50px;
  transition: all .4s;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Step 4

Let's move on to styling the icons one by one.

CSS

.icon:nth-child(1):hover {
  box-shadow: 0 0 0 10px #1877f2;
}

.icon:nth-child(2):hover {
  box-shadow: 0 0 0 10px #c32aa3;
}

.icon:nth-child(3):hover {
  box-shadow: 0 0 0 10px #25d366;
}

.icon:nth-child(4):hover {
  box-shadow: 0 0 0 10px #1da1fe;
}

This allows us to define a different colored shadow for each icon.

Step 5

Let’s finish by modifying the color of each icon, one by one.

CSS

.fa-facebook {
  color: #1877f2;
  filter: drop-shadow(0 0 10px #1877f2);
}

.fa-instagram {
  color: #c32aa3;
  filter: drop-shadow(0 0 10px #c32aa3);
}

.fa-whatsapp {
  color: #25d366;
  filter: drop-shadow(0 0 10px #25d366);
}

.fa-twitter {
  color: #1da1f2;
  filter: drop-shadow(0 0 10px #1da1f2);
}

Category: Development