HTML code.
Код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
<title>Создание кнопоки.</title>
</head>
<body>
<section class="footer-social">
<a class="social-btn social-btn-vk" href="#">Вконтакте</a>
<a class="social-btn social-btn-fb" href="#">Фейсбук</a>
<a class="social-btn social-btn-inst" href="#">Инстаграм</a>
</section>
</body>
</html>
CSS codeКод
body{
color: #ffffff;
background: #000000
min-width: 800px;
min-height: 600px;
font-family: 'PT Sans Narrow', sans-serif;
}
.social-btn{
display: inline-block;
background:#000000;
font-size:0;
text-decoration: none;
vertical-align: top;
width:43px;
height: 43px;
margin:0 2px;
background: #000000 url("image/social-icons.png") no-repeat center 3px;
}
.social-btn-vk{
background-position:0 0;
}
.social-btn-inst{
background-position:-85px 0px;
}
.social-btn-fb{
background-position:-45px 0px;
}
.social-btn:hover{
background-color:#ffffff;
}
.social-btn-vk:hover{
background-position:0 -43px;
}
.social-btn-inst:hover{
background-position:-85px -43px;
}
.social-btn-fb:hover{
background-position:-45px -43px;
}
Кому что не понятно задаем вопросы.
Файл html и css , и картинки фб.
Кому не сложно напишите полезная тема или нет.Добавлено (31.10.2017, 19:29)
---------------------------------------------
Скоро новый топик!!
