Как сделать красивые кнопки только при помощи CSS3

Сегодня мы будем создавать кнопки для социальных закладок, которые будут выполнены только при помощи CSS3, за исключением изображений твиттер, facebook и конверта. При помощи стилей мы опишим 3 состояния кнопки.

Выглядит это следующим образом.кнопки

1. Скачайте необходимые иконки здесь -> иконки. Иконки поместить в папку images, которая должна находится в одной директории с файлами index.html и style.css

2. И так создадим простой HTML документ и внесём туда следующее:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Красивые кнопки созданные только при помощи CSS3</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo&v1' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>

После добавим контейнер с нашими кнопками.

<div class="container">
<!-- Нравится-->   
        <span class="button">
            <a href="#"><img src="images/fb.gif" alt="" />равится</a>
        </span>   
<!-- Твитнуть-->   
        <span class="button">
            <a href="#"><img src="images/tweet.gif" alt="" />Твитнуть</a>
        </span>
<!-- Написать-->          
        <span class="button">
            <a href="#"><img src="images/mail.gif" alt="" />Написать</a>
        </span>
    </div>

Каждая кнопка будет иметь 1 класса, который будет описывать поведение кнопки. Поэтому вы с лёгкостью можете вставлять другие иконки и вносить другой текст.
В начале мы получим следующий текст с изображениями, который имеет дефолтовый стиль вашего браузера.иконки вначале

3. Теперь добавим стилей. Для этого создадим файл style.css и внесём туда следующее:

Сначала добавим туда общих стилей, чтобы описать стандартные тэги.

@charset "utf-8";
/* CSS Document */
body{
    background:#00b5e7;
}
a{
    text-decoration: none;
	color:#333333;	
}
.container{
    width: 420px;
	margin: 10% auto 0;
}

Теперь опишем нормальное состояние кнопки. Как мы видим из рисунка

.button a{
	font-family: 'Arvo', arial, serif;;/*Данный шрифт мы получим по ссылке, которую описали в начале html файла */
	font-size:16px;
	background: #ffffff; /* Для тсарых браузеров, которые не поддерживают градиент */
	background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* Для корректной работы в FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /*Для корректной работы в Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Для корректной работы в Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Для корректной работы в Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /*Для корректной работы в IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /*Для корректной работы в IE6-9 */
	background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
      /*Закруглённые края*/
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
      /*Задаём тень*/
	-moz-box-shadow: 0 3px 4px -1px #464646;
	-webkit-box-shadow: 0 3px 4px -1px #464646;
	box-shadow: 0 3px 4px -1px #464646;
     /*Отступы, 6 пикселей сверху и снизу и по 12 пикселей по бокам*/
	padding: 6px 12px;	
}

4. Теперь зададим стили для кнопки, когда на неё наведён курсор. Для этого нам необходимо описать свойства hover и focus.
Когда на кнопку попадает мышка

Когда кнопка нажата должна появится внутренняя тень.

.button a:hover, .button a:focus{
        background: #dfdfdf; /* Старые версии браузеров */
	background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* стандарт W3C */
	-moz-box-shadow: 0 1px 1px 0 #666666;
	-webkit-box-shadow: 0 1px 1px 0 #666666;
	box-shadow: 0 1px 1px 0 #666666;
}

Это общее описание, теперь зададим стиль конкретно для того момента, когда кнопка нажата. Будьте внимательны это описание должно идти ниже выше описанного.

.button a:focus{
    -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    -webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
}

5. Опишем расположение иконки на кнопке.

.button a > img{
    padding-right: 8px;
    position: relative;
    top: 2px;
}

6. В итоге мы должны будем получить следующее:

готовые кнопки

7. Урок переведён с урока Джастина Хаббарда, там же можно скачать сам файл и посмотреть демку.



Один комментарий на «“Как сделать красивые кнопки только при помощи CSS3”»

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *