<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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" rel="stylesheet"> <!-- Include the above in your HEAD tag --> <div class="container-fluid" id="cont"> <div class="row"> <div class="col-sm-12"> <div class="middle"> <a class="btn2" href="#"> <i class="fab fa-facebook-f"></i> </a> <a class="btn2" href="#"> <i class="fab fa-twitter"></i> </a> <a class="btn2" href="#"> <i class="fab fa-instagram"></i> </a> <a class="btn2" href="#"> <i class="fab fa-google"></i> </a> <a class="btn2" href="#"> <i class="fab fa-youtube"></i> </a> </div> </div> </div> </div>

#cont { background-color: #002147; padding: 100px; } .middle { text-align: center; } .btn2 { display: inline-block; width: 50px; height: 50px; background: #f1f1f1; margin: 10px; border-radius: 30%; box-shadow: 0 5px 15px -5px #ecf0f1; color: #3498db; overflow: hidden; position: relative; } a.btn2:hover { transform: scale(1.3); color: #f1f1f1; } .btn2 i { line-height: 50px; font-size: 20px; transition: 0.2s linear; } .btn2:hover i { transform: scale(1.3); color: #f1f1f1; } .fa-facebook-f { color: #3c5a99; } .fa-twitter { color: #1da1f2; } .fa-instagram { color: #e1306c; } .fa-google { color: #dd4b39; } .fa-youtube { color: #ff0000; } .btn2::before { content: ""; position: absolute; width: 120%; height: 120%; background: #3498db; transform: rotate(45deg); left: -110%; top: 90%; } .btn2:hover::before { animation: aaa 0.7s 1; top: -10%; left: -10%; } @keyframes aaa { 0% { left: -110%; top: 90%; } 50% { left: 10%; top: -30%; } 100% { left: -10%; top: -10%; } }