Floating Social Media Icons in HTML CSS

This HTML CSS code showcases a set of floating social media icons that appear in the bottom left corner of a web page. When you hover over the main sharing button, additional social media icons slide into view. Each icon represents a specific social media platform, such as WhatsApp, Facebook, Twitter, and Pinterest.

The icons are designed to be eye-catching, with a circular shape and brand background color, making it easy for visitors to share your content on their preferred social platforms. This implementation utilizes CSS transitions and effects to create a smooth and visually appealing user experience.

It provides a stylish way to display social media icons on your website, which can be utilized for social sharing projects or to link to your various social media profiles. However, the code does not include any functionality to handle actual social media sharing or interaction with social platforms.

How to Create Floating Social Media Icons in HTML CSS

1. First of all, load the Font Awesome 5 CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" integrity="sha512-W5OxdLWuf3G9SMWFKJLHLct/Ljy7CmSxaABQLV2WIfAQPQZyLSDW/bKrw71Nx7mZKN5zcL+r8pRCZw+5bIoHHw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

2. Create the HTML structure for social icons as follows:

<div class="sbuttons">	
  <a href="#" target="_blank" class="sbutton whatsapp" tooltip="WhatsApp"><i class="fab fa-whatsapp"></i></a>  
	  
  <a href="#" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a>

  <a href="#" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a>

  <a href="#" target="_blank" class="sbutton pinteres" tooltip="Pinterest"><i class="fab fa-pinterest-p"></i></a>

  <a target="_blank" class="sbutton mainsbutton" tooltip="Share"><i class="fas fa-share-alt"></i></a>  
</div>

3. Style the social buttons using the following CSS styles:

/** code by webdevtrick ( https://webdevtrick.com ) **/
@import url(https://fonts.googleapis.com/css?family=Anton&display=swap);
body {
  height: 100vh;
  background-size: 100% 100%;
  font-family: 'Anton', sans-serif;
}
.sbuttons {
  bottom: 5%;
  position: fixed;
  margin: 1em;
  left: 0;
}
.sbutton {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  color: white;
  margin: 20px auto 0;
  box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  position: relative;
}
.sbutton > i {
  font-size: 38px;
  line-height: 60px;
  transition: all .2s ease-in-out;
  transition-delay: 2s;
}
.sbutton:active,
.sbutton:focus,
.sbutton:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}
.sbutton:not(:last-child) {
  width: 60px;
  height: 60px;
  margin: 20px auto 0;
  opacity: 0;
}
.sbutton:not(:last-child) > i {
  font-size: 25px;
  line-height: 60px;
  transition: all .3s ease-in-out;
}
.sbuttons:hover .sbutton:not(:last-child) {
  opacity: 1;
  width: 60px;
  height: 60px;
  margin: 15px auto 0;
}
.sbutton:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}
.sbutton:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}
.sbutton:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}
.sbutton:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}
.sbutton:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}
.sbutton:not(:last-child):nth-last-child(6) {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}

[tooltip]:before {
  font-family: 'Roboto';
  font-weight: 600;
  border-radius: 2px;
  background-color: #585858;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  padding: 5px 7px;
  margin-left: 10px;
  position: absolute;
  left: 100%;
  bottom: 20%;
  white-space: nowrap;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
.sbutton.mainsbutton {
  background: #2ab1ce;
}
.sbutton.gplus {
  background: #F44336;
}
.sbutton.pinteres {
  background: #e60023;
}
.sbutton.twitt {
  background: #03A9F4;
}
.sbutton.fb {
  background: #3F51B5;
}
.sbutton.whatsapp {
  background: #00e676;
}

That’s all! hopefully, you have successfully created floating social media icons. If you have any questions or suggestions, feel free to comment below.