Social buttons increase your website traffic. In this code, these buttons are displayed with the help of another button at the bottom of the screen. These social buttons are all blue and have a circular background. Each button is identified by a white icon on it. The buttons are displayed in full screen and when closed they disappear again and there is only one button at the bottom of the page by which they can be displayed.
HTML
<!-- This script got from www.devanswer.com -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<h1>Click the '+' button</h1>
<div class="social-media-container">
<div class="open-social-media-container">
<i class="fas fa-plus"></i>
</div>
<div class="social-media-link social-media-link1">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-media-link social-media-link2">
<i class="fab fa-twitter"></i>
</div>
<div class="social-media-link social-media-link3">
<i class="fab fa-instagram"></i>
</div>
<div class="social-media-link social-media-link4">
<i class="fab fa-linkedin-in"></i>
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
background: #FF5F6D; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1 {
text-align: center;
}
.social-media-links-overlay {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background-color: rgba(255, 255, 255, 0);
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
}
.social-media-links-overlay.opened {
background-color: rgba(255, 255, 255, 1);
}
.social-media-container {
position: absolute;
left: 50%;
bottom: 10px;
height: 39px;
width: 39px;
z-index: 1;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
}
.social-media-container.opened {
/*background: #000;
*/height: 150px;
width: 150px;
left: 50%;
bottom: 50%;
transform: translate(-50%,50%);
-webkit-transform: translate(-50%,50%);
-moz-transform: translate(-50%,50%);
-ms-transform: translate(-50%,50%);
-o-transform: translate(-50%,50%);
}
.open-social-media-container {
position: absolute;
left: 50%;
top: 50%;
cursor: pointer;
text-align: center;
color: #fff;
background: #1da1f2;
padding: 10px 0;
width: 38px;
z-index: 1;
box-shadow: 0 0 5px 0 rgba(255, 255, 255, .5);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
transform: translate(-50%,-50%) rotate(0deg);
-webkit-transform: translate(-50%,-50%) rotate(0deg);
-moz-transform: translate(-50%,-50%) rotate(0deg);
-ms-transform: translate(-50%,-50%) rotate(0deg);
-o-transform: translate(-50%,-50%) rotate(0deg);
}
.social-media-link {
position: absolute;
cursor: pointer;
text-align: center;
color: #fff;
background: #1da1f2;
padding: 10px 0;
width: 38px;
opacity: 0;
z-index: 0;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.social-media-link1 {
left: 0;
top: 0;
}
.social-media-link2 {
right: 0;
top: 0;
}
.social-media-link3 {
right: 0;
bottom: 0;
}
.social-media-link4 {
left: 0;
bottom: 0;
}
.open-social-media-container.opened {
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
-webkit-transform: translate(-50%,-50%) rotate(45deg);
-moz-transform: translate(-50%,-50%) rotate(45deg);
-ms-transform: translate(-50%,-50%) rotate(45deg);
-o-transform: translate(-50%,-50%) rotate(45deg);
}
.social-media-container.opened .social-media-link {
opacity: 1;
}Javascript
(function ($) {
$(document).ready(function(){
$('body').append('<div class="social-media-links-overlay"></div>');
});
$('.open-social-media-container').on('click', function() {
$('.social-media-container').toggleClass('opened');
$(this).toggleClass('opened');
$('.social-media-links-overlay').toggleClass('opened');
})
})(jQuery);
