Aşağıdaki kodları editörünüze koyalayıp bakar mısınz? Niçin butonların görsellerri gözükmüyor? Çözen arkadaşlarımız kodu derleyip yazmalarını rica ediyorum.
HTML:
<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>
CSS:
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.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:hover {
background-color: #3b5998;
transform: rotate(360deg);
border-radius: 50%;
}
.sosyalbutonlar .google-plus:hover {
background-color: #dd4b39;
transform: rotate(360deg);
border-radius: 50%;
}
.sosyalbutonlar .linkedin:hover {
background-color: #00aced;
transform: rotate(360deg);
border-radius: 50%;
}
.sosyalbutonlar .youtube:hover {
background-color: #bb0000;
transform: rotate(360deg);
border-radius: 50%;
}
```
