Hi all, Today share to how to create social media floating social media button icon. This type button icon very easy to use. Click the button floating show to social icons. This code easy to understand and use. Demo video available.
Code:
<div class="float-sm">
<div class="fl-fl float-fb">
<i class="fa fa-facebook"></i>
<a href="" target="_blank"> Like us!</a>
</div>
<div class="fl-fl float-tw">
<i class="fa fa-twitter"></i>
<a href="" target="_blank">Follow us!</a>
</div>
<div class="fl-fl float-gp">
<i class="fa fa-google-plus"></i>
<a href="" target="_blank">Recommend us!</a>
</div>
<div class="fl-fl float-rs">
<i class="fa fa-rss"></i>
<a href="" target="_blank">Follow via RSS</a>
</div>
<div class="fl-fl float-ig">
<i class="fa fa-instagram"></i>
<a href="" target="_blank">Follow us!</a>
</div>
<div class="fl-fl float-pn">
<i class="fa fa-pinterest"></i>
<a href="" target="_blank">Follow us!</a>
</div>
</div>
Css:
.text {
margin: 0 60px;
}
h1 {
font-size: 32px;
margin-top: 0;
font-family: 'Playfair Display', serif;
font-weight: 400;
font-style: italic;
text-align: center;
background:purple;
color: #fff;
padding: 4px;
}
p,
span,
.twitter {
font: normal normal 10px Arial;
text-align: center;
color: #998578;
text-transform: uppercase;
letter-spacing: 3px;
}
.twitter {
color: #72898b;
text-decoration: none;
display: block;
padding: 14px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.twitter:hover {
color: #FF7D6D;
text-decoration: none;
}
span {
font-style: italic;
display: block;
}
img {
max-width: 100%;
}
/* Floating Social Media Bar Style Starts Here */
.fl-fl {
background:purple;
text-transform: uppercase;
letter-spacing: 3px;
padding: 4px;
width: 190px;
position: fixed;
right: -160px;
z-index: 1000;
font: normal normal 10px Arial;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.fa {
font-size: 20px;
color: #fff;
padding: 10px 0;
width: 40px;
margin-left: 8px;
}
.fl-fl:hover {
right: 0;
}
.fl-fl a {
color: #fff !important;
text-decoration: none;
text-align: center;
line-height: 43px!important;
vertical-align: top!important;
}
.float-fb {
top: 160px;
}
.float-tw {
top: 215px;
}
.float-gp {
top: 270px;
}
.float-rs {
top: 325px;
}
.float-ig {
top: 380px;
}
.float-pn {
top: 435px;
}
0 Comments