Одно из основных преимуществ такого метода в том, что если у пользователя в браузере не будет поддержки CSS, то он все равно будет видеть привлекательную выпуклую кнопку.
Что мы сегодня будем делать
Для создания красивой кнопки у нас будет примерно такой вот план:
* Красивая фоновая градация
* Закругленные углы
* Красивые границы для придания трехмерного эффекта
* Тень
* Тень текста (для большей красоты)
В итоге у нас получится вот такая вот кнопка, с использованием всего лишь небольшого изображения градации (а если CSS будет поддерживать градацию, то нам и вовсе не понадобятся изображения).
HTML
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>Как вы уже заметили, HTML-сторона очень простая. Нам просто требуется тэг анкора и текст. А абзац тут просто для соблюдения грамотности составления кода.
CSS
.css3button a {
background: url(background.gif) bottom repeat-x #9eabb3;
padding: 5px 10px 5px 10px;
text-align: center;
font-weight: bold;
color: #fff;
text-decoration: none; border: 1px inset #aaa;
-webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px;
-moz-box-shadow: 1px 1px 1px #666; -webkit-box-shadow: 1px 1px 1px #666; box-shadow: 1px 1px 1px #666;
text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
border-top: inset 1px #ccc; border-left: inset 1px #ccc; border-bottom: solid 1px solid #000; border-right: 1px solid #666;
}
.css3button a:hover {
background: #999;
text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}
В коде CSS все немного сложнее, но всё же не так сложно. Мы просто ставим повторение на фоновое изображение, закругления углов и тени для таблицы и текста. Такие углы придают немного глубины и затемнения, это гарантирует нам приятный выпуклый вид, даже если не будет поддержки CSS.
Фоновое изображение представляет собой простую градацию, что придает глубину нашей кнопке. В данном случае мы использовали это изображение:
Это очень просто
Вот так вот все на самом деле просто. Если вы хотите обыграть границы, то вы можете применять какие-нибудь интересные эффекты.
Примеры
Скачать архив с примерами:
