Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
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;
}
</style>
</head>
<body>
<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>
<script>
(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);
</script>
</body>
</html>
