DevAnswer - Developers Answer

Expanding Social Buttons Code at Page Bottom

4th November

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>                        



Other Codes