<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <ul> <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li> </ul> </div>

body { margin:0; padding:0; background:#856996; } ul { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; display:flex; } ul li { list-style:none; margin:0 80px; } ul li a { position: relative; width: 90px; height: 90px; display: block; text-align: center; margin: 0 10px; border-radius: 50%; padding: 6px; box-sizing: border-box; text-decoration: none; box-shadow: 0 10px 15px rgba(0,0,0,0.3); background: linear-gradient(0deg, #ddd, #fff); transition: .5s; } ul li a:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.3); } ul li a .fa{ width:100%; height: 100%; display: block; background: linear-gradient(0deg, #fff, #ddd); color: #262626; border-radius: 50%; line-height: calc(90px - 12px); font-size: 40px; } ul li:nth-child(1) a:hover .fa { color: #00f; } ul li:nth-child(2) a:hover .fa { color: #00aced; } ul li:nth-child(3) a:hover .fa { color: #dd4b39; } ul li:nth-child(4) a:hover .fa { color: #007bb6; } ul li:nth-child(5) a:hover .fa { color: #bc2a8d; }