Home Web Design CSS CSS Social Share Buttons | HTML CSS Floating Social Media Icons

CSS Social Share Buttons | HTML CSS Floating Social Media Icons

June 11, 2019

21839

How we can create floating social media sharing icons using HTML & CSS? Solution: CSS Social Share Buttons, HTML CSS Floating Social Media Icons.

I am sure that know about social media sharing buttons. Many types of sharing buttons available, but 2-3 types of most peoples use. Some peoples use fixed button before or after content, & some use widgets type floating buttons. There are many social sharing services & plugins, you can use easily.

Today I will see a pretty UI based sharing buttons, and with shadow, It looks like material design. The best thing about using these buttons, you can customize easily. Because it is easy to customize or edit. If you use any online service then the file will heavy, & website will take a long time to load. This very lightweight file with few lines of codes & also with icons.

So, Today I am sharing CSS Social Share Buttons with material design & hover effect. This is a pure HTML CSS floating social media sharing buttons with icons. You can call it pure CSS sharing buttons with hover effect. Basically, buttons are expanding or appear on mouse hover, otherwise a single button visible.

If are you thinking now how these floating button actually is, then see the preview given here below.

Preview Of Floating Social Media Icons

See this video preview to getting an idea about how this button looks like.

Now you can see this pure CSS widget visually. If you like this, then get the source code of its.

CSS Social Share Buttons With Material Design Source Code

Before sharing source code, let’s talk about it. As you know, I used only HTML & CSS for creating it. And for icons, I used the font-awesome icon library. First I created the main div with class= "sbuttons" & after that, I put 4 icons inside hyperlinks <a>. In 4 divs I put the same class “sbuttons” as I put on the main div.

And also put extra class for giving different color to each icon. I placed in of bottom left using bottom: 5%; & left: 0; property values. You can adjust it as you want, by changing CSS values. I put animation delay and other properties expect the last buttons, which is the main share icon. I selected all icons to expect the last one by using :not(:last-child) CSS property.

Then I placed different transition-delay for every icon. Basically, I selected by order of last to first, and put delay with increasing 20ms. Also, I used CSS tooltip property, Its show information on an object on hover (more info). I placed the text of the tooltip of perfect position according to buttons. And some other lefts are you will understand after getting the codes.

For creating this social sharing button widgets, you have to create only 2 files. One for HTML, and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS Floting Share Buttons | Webdevtrick.com</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">  
      <link rel="stylesheet" href="style.css">
</head>
<body>

  <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 gplus" tooltip="Google Plus"><i class="fab fa-google-plus-g"></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>  

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Floting Share Buttons | Webdevtrick.com</title>

</head>

<body>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** 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;
  color: #fff;
}
.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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/** 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;

color: #fff;

}

.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 It. Now you have successfully created CSS Social Share Buttons With Material Design. In other words, Pure HTML & CSS floating sharing buttons with hover effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

15 COMMENTS

Tarun June 11, 2019 At 4:46 pm

Such a nice social media icon animation

Reply
- shaan June 11, 2019 At 5:12 pm
  
  Thank you very much, Traun!
  
  Reply
Farhan Ahmad June 11, 2019 At 4:55 pm

Hey bro with out the actual backend code this share button blog is useless

Reply
- shaan June 11, 2019 At 5:06 pm
  
  I know bro, This is only UI. You can add backend features in it.
  
  Reply
- Jai June 12, 2019 At 3:36 am
  
  Nice..
  
  Reply
  - shaan June 12, 2019 At 3:43 am
    
    Thank you very much Jai.
    
    Reply
ASR827 June 15, 2019 At 4:47 pm

This code set in blogger
Yes / No
Plz told me

Reply
- shaan June 15, 2019 At 4:59 pm
  
  Yes, But you have to create a main div and put the values I have put in the body section.
  
  Reply
  - Fauxy June 18, 2019 At 3:28 pm
    
    This is Cool.
    
    Reply
    - shaan June 18, 2019 At 3:56 pm
      
      Thanks
      
      Reply
king August 31, 2019 At 4:21 am

Hello Buddy.
The problem is here that the icons don’t load up!
how do I solve it?

Reply
- shaan August 31, 2019 At 6:23 am
  
  have you linked font-awesome icon library in head section?
  
  Reply
kushal October 28, 2019 At 6:15 pm

when i hover on sbuttons area (even if they are non visible) they pop up on mobile screen, Please give solution brother ASAP.I tried alot.. waiting.. Thanks

Reply
alex January 21, 2021 At 12:00 am

can make it’s to be responsive, i wanna put on mobile version.
i already tried but some problem with zone area of button look like too sensitive

Reply
Jose Dmitri March 6, 2021 At 7:15 pm

how can that be done for blogger sites http://www.jpeeiclinic.com i want left floating

Reply