<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <center><h2 id="sosyalbaslik" class="text-center">Hover Effects on Social Media Icons with CSS</h2></center> <center> <div class="sosyalbutonlar"> <a href="https://www.facebook.com/sharer.php?u=https://oyakbilgi.blogspot.com/p/oyaknemahesap.html" class="facebook" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a> <a href="whatsapp://send?text=OYAK AYLIK MAAS HESAPLAMA ROBOTU https://oyakbilgi.blogspot.com/p/oyaknemahesap.html" class="whatsapp" title="WhatsApp" data-action="share/whatsapp/share" target="_blank"><i class="fa fa-whatsapp"></i></a> <a href="https://telegram.me/share/url?url=https://oyakbilgi.blogspot.com/p/oyaknemahesap.html&text=OYAK Aylık Maaş Hesaplama Robotu" class="telegram" title="Telegram" target="_blank"><i class="fa fa-telegram"></i></a> <a href="https://twitter.com/home?status=https://oyakbilgi.blogspot.com/p/oyaknemahesap.html" class="twitter" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a> <a href="mailto:?subject=OYAK Aylık Maaş Hesaplama Robotu body=https://oyakbilgi.blogspot.com/p/oyaknemahesap.html" class="mail" title="Email"><i class="fa fa-envelope" target="_blank"></i></a> </div> </center> <center><h2 id="sosyalbaslik" class="text-center">Hover Effects on Social Media Icons with CSS</h2></center> <div class="sosyalbutonlar"> <a href="http://facebook.com/cahitsoyman.blogspot.com" target="_blank" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="http://twitter.com/cahitsoyman.blogspot.com" target="_blank" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a> <a href="http://google-plus.com//cahitsoyman.blogspot.com" target="_blank" class="google-plus" ><i class="fa fa-google-plus" aria-hidden="true"></i></a> <a href="http://instagram.com//cahitsoyman.blogspot.com" target="_blank" class="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="http://linkedin.com//cahitsoyman.blogspot.com" target="_blank" class="linkedin" ><i class="fa fa-linkedin" aria-hidden="true"></i></a> <a href="http://youtube.com//cahitsoyman.blogspot.com" target="_blank" class="youtube"><i class="fa fa-youtube" aria-hidden="true"></i></a> </div> </div> </div>

#sosyalbaslik { font-family: 'Oswald', sans-serif; color: #212121; font-size: 30px; font-weight: bold; padding-left: 150px; margin-top: 50px; } .sosyalbutonlar{ margin-top: 50px; display: inline-block; position: relative; left: 200px; } .sosyalbutonlar a { background:#a1a1a1; text-decoration: none; color: #FFF; width: 60px; height: 60px; display: inline-block; border-radius: 10px; margin-right: 20px; font-size: 30px; overflow: hidden; position: relative; line-height: 60px; text-align: center; } .sosyalbutonlar a{ transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s; } .sosyalbutonlar .facebook { background-color: #3b5998; } .sosyalbutonlar .whatsapp { background-color: #0DC143; } .sosyalbutonlar .twitter { background-color: #00aced; } .sosyalbutonlar .telegram { background-color: #1296CA; } .sosyalbutonlar .google-plus { background-color: #dd4b39; } .sosyalbutonlar .instagram { background-color: #bc2a8d; } .sosyalbutonlar .linkedin { background-color: #00aced; } .sosyalbutonlar .mail { background-color: #D3A003; }