İçeriğe geç

HTML-CSS ile Sosyal Medya Butonları

Merhabalar 🙂
Bugün yazılımcı yanım biraz ağır bastı sanırım, sitelerinize ekleyebileceğiniz basit bir sosyal medya butonları yaptım onları sizler ile paylaşacağım.

Aşağıda bulunan görselde ki gibi bir uygula yapacağız.

social-media


Öncelikle kullanacağımız resimleri “img” adlı dosyamızın içine atıyoruz.

HTML Kodları

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”sosyal-medya.css”>

</head>
<body>

</body>

</html>

CSS Kodları

ul{
list-style: none;
}
.sb{
float: left;
width: 30px;
height: 30px;
text-align: center;
padding: 3px;
}

.sb-facebook{
background-image: url(‘img/fb-icon.png’);
background-repeat: no-repeat;
color: #fff;
}
.sb-facebook:hover{
background-image: url(‘img/fb-hover.png’);
cursor: pointer;
}

.sb-twitter{
background-image: url(‘img/twitter.png’);
background-repeat: no-repeat;
}

.sb-twitter:hover{
background-image: url(‘img/twitter-hover.png’);
background-repeat: no-repeat;
}

.sb-instagram{
background-image: url(‘img/instagram.png’);
background-repeat: no-repeat;
}

.sb-instagram:hover{
background-image: url(‘img/instagram-hover.png’);
background-repeat: no-repeat;
}
.sb-linkedin{
background-image: url(‘img/linkedin.png’);
background-repeat: no-repeat;
}

.sb-linkedin:hover{
background-image: url(‘img/linkedin-hover.png’);
background-repeat: no-repeat;

}

Tarih:GenelYazılım/Teknoloji

İlk Yorumu Siz Yapın

    Bir cevap yazın

    E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir