<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="container-fluid social-bar-default" id="social-bar"> <div class="container"> <div class="row"> <div class="middle-container col-1"> <div class="social-container"> <a class="btn-social" href="#" target="_blank"> <i class="fab fa-facebook-f"></i> </a> </div> <div class="social-container"> <a class="btn-social" href="#" target="_blank"> <i class="fab fa-whatsapp"></i> </a> </div> <div class="social-container"> <a class="btn-social" href="#" target="_blank"> <i class="fab fa-instagram"></i> </a> </div> <div class="social-container sonar-effect"> <a class="btn-social" href="#" target="_blank"> <i class="fas fa-comments-dollar"></i> </a> </div> </div> </div> </div> </div>

body { background-color: #0f0f0f; } .social-bar-default { transition: all ease 300ms; display: block; } .middle-container { position: fixed; display: block; top: 50% !important; left: 0%; transform: translateY(-50%); z-index: 2000; } .btn-social { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #fff; margin: 5px; border-radius: 30%; box-shadow: 0 5px 15px -5px #00000070; color: #054A85; overflow: hidden; position: relative; } .btn-social i { line-height: 90px; font-size: 26px; } .btn-social:hover { background-color: #0880e8 !important; color: #fff; } .social-container { transition: ease all 300ms; } .social-container:hover { transform: scale(1.1); } .sonar-effect { position: relative; } .sonar-effect::after { content: ""; border: 5px solid #ebeaff; position: absolute; top: 0; left: 0; width: 55px; height: 55px; border-radius: 30%; animation: sonar 1.5s infinite; } @keyframes sonar { 0% { transform: scale(0.9); opacity: 1; top: -2px; left: 2px; } 100% { transform: scale(1.1); top: -2px; opacity: 0; left: 2px; } }