Введение
Без кнопок, неотъемлемой части 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>