<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 ----------> <div class="container"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <hr style="border: 10px solid green; border-radius: 5px;" /> <button type="reset" class="form-group btn-success btn-lg btn-block" value="ahmet">Social links</button> <!-- Add font awesome icons --> <div class="social-btns"> <a class="btn facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a class="btn google" href="#"><i class="fa fa-google" aria-hidden="true"></i></a> <a class="btn linkedin" href="#"><i class="fa fa-telegram" aria-hidden="true"></i></a> <a class="btn instagram" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a class="btn flickr" href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a> <a class="btn github" href="#"><i class="fa fa-github" aria-hidden="true"></i></a> </div> <hr style="border-top: 3px dashed green;" /> </div>

.social-btns .btn{padding: 18px 18px;} .social-btns .btn, .social-btns .btn:before, .social-btns .btn .fa { -webkit-transition: all 0.35s; transition: all 0.35s; -webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59); transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59); } .social-btns .btn:before { top: 90%; left: -110%; } .social-btns .btn .fa { -webkit-transform: scale(0.8); transform: scale(0.8); } .social-btns .btn.facebook:before { background-color: #3b5998; } .social-btns .btn.facebook .fa { color: #3b5998; } .social-btns .btn.instagram:before { background-color: sandybrown; } .social-btns .btn.instagram .fa { color: sandybrown; } .social-btns .btn.google:before { background-color: #dc4a38; } .social-btns .btn.google .fa { color: #dc4a38; } .social-btns .btn.flickr:before { background-color: hotpink; } .social-btns .btn.flickr .fa { color: hotpink; } .social-btns .btn.github:before { background-color: black; } .social-btns .btn.github .fa { color: black; } .social-btns .btn.linkedin:before { background-color: royalblue; } .social-btns .btn.linkedin .fa { color: royalblue; } .social-btns .btn:focus:before, .social-btns .btn:hover:before { top: -10%; left: -10%; } .social-btns .btn:focus .fa, .social-btns .btn:hover .fa { color: #fff; -webkit-transform: scale(1); transform: scale(1); } .social-btns { margin: auto; font-size: 0; text-align: center; position: inherit; top: 0; bottom: 0; left: 0; right: 0; } .social-btns .btn { display: inline-block; background-color: #fff; width: 5em; height: 5em; margin: 0 10px; text-align: left; vertical-align: middle; line-height: 50%; position: relative; overflow: hidden; border-radius: 28%; box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1); opacity: 0.99; } .social-btns .btn:before { content: ''; width: 120%; height: 120%; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .social-btns .btn .fa { font-size: 2.5em; vertical-align: middle; }