Оформление кнопки с помощью CSS3 


Оформление кнопки с помощью CSS3

Опубликовано

Введение

Без кнопок, неотъемлемой части HTML формы, не обходится ни один веб-сайт. Однако не всех устраивает их традиционно стандартный внешний вид. Поэтому в большинстве случает веб-мастер, подвергает ее трансформированию, дабы гармонично вписать кнопку в дизайн веб-страницы.

Оформить кнопку можно различными способами, но самый простой и быстрый - это использование свойств стилевого языка CSS. В пользу стилевого языка выступает, и тот факт, что новая версии CSS3 позволяет создавать сложные эффекты, такие как закругление углов, наложение теней и градиента.

Прежде чем перейти к рассмотрению примера, хотел бы обратить внимание на формат написания некоторых свойств нового CSS3. Особый префикс в начале свойства указывает на браузер, которому предназначено обработать данное свойство:

  • -o- Opera
  • -moz- Mozilla Firefox
  • -webkit- Google Chrome, Apple Safari

Пример

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=win-1251" />
<title>Button</title>

<style>
body{
 background-color:#f5f5f5;
 margin:30px;
 text-align:center;
}

#button{
 padding:10px 15px;/*Отступ от границы рамки до текста */
 background-color:#f5f5f5;/*Фон*/
 border:1px solid #DEDEDE;/*Граница кнопки*/
 font:normal 15px "Tahoma";/*Шрифт*/
 color:#8F8F8F;/*Цвет шрифта*/
 cursor:pointer;/*Курсор мыши*/

 /*
 Тень, отбрасываемая текстом в кнопке:
 text-shadow: none | тень
 где тень: [сдвиг по x] [сдвиг по y] [радиус размытия] [цвет]
 */
 text-shadow: 0 1px 0 white;

 /*
 Закругление углов кнопки:
 */
 -moz-border-radius: 5px;
 -webkit-border-radius:5px;
 border-radius: 5px;

 /*
 Градиент:
 linear-gradient(направление наложения градиента, цвет 1, цвет 2)
 Происходит плавный переход от цвета 1 к цвету 2 в заданном направлении.
 */
 background: -webkit-linear-gradient(top, #fff, #EBEBEB);
 background:    -moz-linear-gradient(top, #fff, #EBEBEB);
 background:     -ms-linear-gradient(top, #fff, #EBEBEB);
 background:      -o-linear-gradient(top, #fff, #EBEBEB);
}

#button:hover{

 /*
 Тень вокруг кнопки
 box-shadow: none | тень [, тень]*
 где  тень: inset [сдвиг по x] [сдвиг по y] [радиус размытия] [растяжение] [цвет]
 Значение insert указывается, если нужно создать внутреннюю тень.
 */
 -webkit-box-shadow:0 0 5px 1px #EAEAEA;
 -moz-box-shadow:0 0 5px 1px #EAEAEA;
 box-shadow:0 0 5px 1px #EAEAEA;

 /*
 Градиент
 linear-gradient(направление наложения градиента, цвет 1, цвет 2)
 Происходит плавный переход от цвета 1 к цвету 2 в заданном направлении.
 */
 background: -webkit-linear-gradient(top, #fff, #E0E0E0);
 background:    -moz-linear-gradient(top, #fff, #E0E0E0);
 background:     -ms-linear-gradient(top, #fff, #E0E0E0);
 background:      -o-linear-gradient(top, #fff, #E0E0E0);
}

#button:active{

 -webkit-box-shadow:inset 0 1px 0 1px #B5B5B5;
 -moz-box-shadow:inset 0 1px 0 1px #B5B5B5;
 box-shadow:inset 0 1px 0 1px #B5B5B5;

 background: -webkit-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:    -moz-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:     -ms-linear-gradient(top, #E3E3E3, #FAFAFA);
 background:      -o-linear-gradient(top, #E3E3E3, #FAFAFA);
}
</style>


</head>
<body>

 <button id="button">CSS кнопка</button>

</body>
</html>