Красивые кнопки на CSS3

От нечего делать решил сделать кнопки на CSS3. Получились неплохие, поэтому выкладываю сюда.
Итак, коротко о главном: представляем вам красивые кнопки на CSS3 в двух вариантах - черные и белые. Работает во всех браузерах, даже в IE (проверял в 7 версии).

1) ПУ -> Управление дизайном -> Таблица стилей (CSS) -> Вставляем стили кнопок:

Code

/* ==== CSS3-кнопки by web41k.ru ==== */
.button_black:link, .button_black:visited {background: -webkit-linear-gradient(bottom, rgb(35, 37, 43) 00%, rgb(39, 42, 48) 99%); background: -moz-linear-gradient(bottom, rgb(35, 37, 43) 00%, rgb(39, 42, 48) 99%); background: -o-linear-gradient(bottom, rgb(35, 37, 43) 00%, rgb(39, 42, 48) 99%); background: -ms-linear-gradient(bottom, rgb(35, 37, 43) 00%, rgb(39, 42, 48) 99%);background: linear-gradient(bottom, rgb(35, 37, 43) 00%, rgb(39, 42, 48) 99%); padding:5px; margin:-1px; color:#fff; font-weight:bold;box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1); -webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1); -ms-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1); -o-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1); text-decoration:none; font-family:Verdana; font-size:12px; border:1px solid #222;}
.button_black:hover {background: -webkit-linear-gradient(bottom, rgb(39, 42, 48) 0%, rgb(35, 37, 43) 100%); background: -moz-linear-gradient(bottom, rgb(39, 42, 48) 0%, rgb(35, 37, 43) 100%); background : -o-linear-gradient(bottom, rgb(39, 42, 48) 0%, rgb(35, 37, 43) 100%); background : -ms-linear-gradient(bottom, rgb(39, 42, 48) 0%, rgb(35, 37, 43) 100%); background : linear-gradient(bottom, rgb(39, 42, 48) 0%, rgb(35, 37, 43) 100%);}
/* ---------- */
.button_white:link, .button_white:visited {background: -webkit-linear-gradient(bottom, rgb(218, 218, 218) 0%, rgb(250, 250, 250) 100%); background: -moz-linear-gradient(bottom, rgb(218, 218, 218) 0%, rgb(250, 250, 250) 100%); background: -o-linear-gradient(bottom, rgb(218, 218, 218) 0%, rgb(250, 250, 250) 100%); background: -ms-linear-gradient(bottom, rgb(218, 218, 218) 0%, rgb(250, 250, 250) 100%); background: -linear-gradient(bottom, rgb(218, 218, 218) 0%, rgb(250, 250, 250) 100%); padding:5px; margin:-1px; border:1px solid #aaa; color: #333; font-size:12px; font-family:Verdana; font-weight:bold; text-decoration:none; box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1); -ms-box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1); -o-box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1); -moz-box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.1);}
.button_white:hover {background: -webkit-linear-gradient(bottom, rgb(250, 250, 250) 0%, rgb(218, 218, 218) 100%); background: -moz-linear-gradient(bottom, rgb(250, 250, 250) 0%, rgb(218, 218, 218) 100%); background: -o-linear-gradient(bottom, rgb(250, 250, 250) 0%, rgb(218, 218, 218) 100%); background: -ms-linear-gradient(bottom, rgb(250, 250, 250) 0%, rgb(218, 218, 218) 100%); background: -linear-gradient(bottom, rgb(250, 250, 250) 0%, rgb(218, 218, 218) 100%);}
/* ---------- */
.buttons_block :first-child {border-radius:5px 0 0 5px;}
.buttons_block :last-child {border-radius:0 5px 5px 0;}
/* ==== CSS3-кнопки by web41k.ru ==== */

2) В нужное место вставляем кнопки:

Code

<div class="buttons_block"><a class="button_black" href="#">Проверка</a><a class="button_black" href="#">Проверка</a><a class="button_black" href="#">Проверка</a><a class="button_black" href="#">Проверка</a><a class="button_black" href="#">Проверка</a></div>

Code

<div class="buttons_block"><a class="button_white" href="#">Проверка</a><a class="button_white" href="#">Проверка</a><a class="button_white" href="#">Проверка</a><a class="button_white" href="#">Проверка</a><a class="button_white" href="#">Проверка</a></div>

Установка завершена!

Мне нравится 6

Просмотры: 1686 · Комментарии: 3 · Добавил: Kelin · Категория: Рецепты HTML и CSS