Стили, которые создают кнопку

css кнопки

Теперь мы готовы создать таблицы стилей, которые соберут из этих элементов глянцевую закругленную кнопку в форме пилюли.

Сначала добавим отступ и белый фон, а также сделаем цвет ссылки белым (рис. 1).

div.more-btn a { padding: 5px 14px; color: #fff; background: #3792b3; }

css кнопка
рис. 1

Далее, добавим ранее созданное PNG-изображение, повторяя его по горизонтали (repeat-x) и центрируя по вертикальной оси (0 50%).

div.more-btn a {
padding: 5px 14px;
color: #fff;
background: #3792b3 url(img/glass-btn.png)
repeat-x 0 50%;
}

На рисунке 2 показано, как с помощью изображения glassbtn. png удалось заполнить синий фон. Так как нижняя часть изображения полностью прозрачна и мы отцентрировали его по вертикальной оси, полупрозрачная часть изображения попадает только на верхнюю половину кнопки, тем самым создавая аккуратный глянец — последний писк моды.

css кнопка
рис. 2

Теперь воспользуемся свойством border-radius, чтобы сделать края кнопки закругленными в браузерах на движках Mozilla и WebKit, а также в программах просмотра, которые будут поддерживать это свойство в будущем (этот способ обсуждался ранее в этой главе). Результат изображен на рисунке 3. Пример в живую можно увидеть на сайте, где можно подключить безлимит.

css кнопка
рис. 3

div.more-btn a {
padding: 5px 14px;
color: #fff;
background: #3792b3 url(img/glass-btn.png)
repeat-x 0 50%;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
}