Красивая кнопочка средствами CSS3

Здравствуйте! Сегодня я расскажу вам о создании средствами CSS3 красивой кнопочки, без использования елемента button))

В качестве базового элемента используется ссылка <a></a>, хотя возможно использовать и другие элементы, только обработку событий производить через JavaScript.
Для начала создадим страничку, и вставим туда вот такой HTML код.


  Test

 <a href="#">Button</a>
 <span>Button</span>

И теперь небольшим волшебством, и лёгким движением руки добавим на страничку такие стили:

.button {
clear:left;
background-clip: border-box;
background-color: #2b2b2b; // цвет фона нашей кнопочки
background-image: none; // повторение фонового изображения
background-origin: padding-box; // позиционирование фона
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
/* Самые главные стили, которые задают закругление углов
и заодно несовместимость со старыми браузерами )) */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* - */
color: #ffffff; // задаём черный цвет
display: inline-block; /* Это значение задаёт блочный элемент, обтекаемый другими элементами веб-страницы подобно встроенному элементу. */
font-family: "Cuprum", "arial", serif; // шрифт текста
font-size: 18px;
height: 47px;
line-height: 47px;
padding-bottom: 0px;
padding-left: 21px; // отступ текста слева
padding-right: 21px; // отступ текста слева
padding-top: 0px;
position: relative;
text-decoration: none; // убираем подчёркивание текста
}
.button:hover { // стиль элемента при наведении мыши
background-clip: border-box;
background-color: #f0f0f0; // меняем цвет фона элемента на серный
background-image: none; // без картинки
background-origin: padding-box; // позиционирование фона
background-position: 0% 0%;
background-repeat: repeat; // повторение фонового изображения
background-size: auto;
color: #191919; // и цвет текста на белый
}

Получим такую страничку …..

<strong>
</strong>

<code><code>

 Test

 <a href="#">Button</a>
 <span>Button</span>

Тут можно увидеть использование в качестве базового элемента ссылки и span.
 Отличие заключается в курсоре, который мы видим при наведении на эту кнопку.

Можно кстати почитать про обход папки в php рекурсивно.

Хотя это можно изменить, задав свойство style=»cursor:pointer;»

Здесь можно увидеть саму кнопочку, как она должна выглядеть.

К сожалению в IE8, и в более старых версиях других браузеров, которые не поддерживают CSS3 не рабоает закругление,

Внешний вид кнопки в разных браузерах.
Как это выглядит в Opera 10.

В IE8.


В Firefox 3.5

В Google Chrome 10

В Firefox 8

Жду комментариев и отзывов 🙂

А на досуге рекомендую почитать http://www.sitestyler.net — интересные книги и журналы про компьютерные сети и вычислительную технику.