Bootstrap Snippet Hover Effects on Social Media Icons with CSS using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#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, 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover Effects on Social Media Icons with CSS"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Hover Effects on Social Media Icons with CSS" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Hover Effects on Social Media Icons with CSS"
Bootstrap 4.1.1 Snippet by muhittinbudak