<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="social"> <a href="" class="link facebook"><span class="fa fa-facebook-square"></span></a> <a href="" class="link twitter"><span class="fa fa-twitter"></span></a> <a href="" class="link google-plus"><span class="fa fa-google-plus-square"></span></a> </div> </div> </div>

body{ background: #fff; margin: 0 auto; text-align: center; padding: 130px; } a.link.facebook { background: #355496; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } a.link.twitter { background-color: #00ACEE; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } a.link.google-plus{ background-color: #ff6347; display: inline-block; height: 50px; width: 50px; border-radius: 50%; color: #fff; font-size: 30px; transform: translateY(-50%); } span{ padding-top:10px; } a.link.facebook:hover{ border-radius:0%; transition-duration: 1s; -webkit-transition-duration: 1s; border:2px solid #355496; background:transparent; color:#355496; } a.link.twitter:hover{ border-radius:0%; transition-duration: 1s; -webkit-transition-duration: 1s; border:2px solid #00ACEE; background:transparent; color:#00ACEE; } a.link.google-plus:hover{ border-radius:0%; transition-duration: 1s; -webkit-transition-duration: 1s; border:2px solid #ff6347; background:transparent; color:#ff6347; }