• 1829
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

Рассмотрим примеры создания CSS-кнопок но без использования картинок.
Для создания красивых кнопок с градиентом и закругленными углами веб-мастерам приходилось использовать картинки с прозрачными областями или сценарии JavaScript (jQuery). К счастью современные браузеры стали поддерживать CSS3 и появилась возможность создавать красивые кнопки более естественным путем через стили.
CSS3 позволяет писать элегантный и простой код, который полностью удовлетворяет требованиям дизайнеров. Кроме того, используемые приемы обладают урезанной совместимостью со старыми браузерами - в любом случае будет отображаться кнопка (только без дополнительных рюшечек).

Для создания кнопки используется тег button

Код:
<button>Щелкни меня</button>


В результате на странице появится серая кнопка, которая не слишком интересна для нас. Давайте ее чуть приукрасим с помощью стандартных проверенных стилей.

Код:
<button class="blue-btn">Щелкни меня</button>
Код:
button.blue-btn{
background: #2e8ce3;
padding: 7px 30px;
font-size:13px;
font-weight: bold;
color:#fff;
text-align: center;
border:solid 1px #73c8f0;
}

Теперь намного лучше - голубая кнопка с белым текстом смотрится интереснее.

Переходим к более продвинутым приемам. Закруглим уголки у кнопки. Здесь наблюдается очень радостная картина, все современные браузеры, включая IE9, уже поддерживают правило border-radius. На всякий случай еще можно использовать старые стили -moz-border-radius и -webkit-border-radius, как временную меру.
Код:
	border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Добавим немного градиента. К сожалению, пока придется использовать специфичные теги для отдельных браузеров (Chrome, Firefox, Safari). Для градиента нужно указывать начальные и конечные точки для перехода цветов.

Код:
background: -moz-linear-gradient(0% 100% 90deg,#2e8ce3, #73c2fd);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73c2fd), to(#2e8ce3));

Добавим небольшую белый ободок, чтобы кнопка была более выпуклой.

Код:
box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;

Новое свойство box-shadow создает эффект тени. В нашем примере мы используем параметр inset, что позволяет добавить белую окантовку шириной в 1 пиксель в верхней части кнопки, но не выходя за пределы границы кнопки.

Для увеличения контрастности добавим темный цвет в нижней части кнопки.

Код:
border-bottom-color:#196ebb;

И, наконец, последний штрих. Добавим для красоты тень не только к кнопке, но и для текста внутри кнопки.

Код:
text-shadow: 0 -1px 0 #196ebb;

Я обратил внимание, что цветная кнопка выглядит статичной в Chrome, хотя в IE8/9 кнопка нормально нажимается. Нужно добавить немного реалистичности. Например, подчеркивание текста при наведении мышкой и эффект нажатия при щелчке. Для этого используются правила :hover и :active

Код:
button.blue-btn7:hover {
text-decoration: underline;
}

button.blue-btn7:active {
position: relative;
top: 1px;
}

Можно упростить создание кнопок, если разделить некоторые стили. Например, создать некоторый базовый функционал для кнопки и создать подклассы, которые будут специфичны для кнопки определенного цвета. Обратите внимание, что мы не используем сам объект Кнопка, а создаем класс, который будет похож на кнопку.

Зададим начальные параметры псевдокнопки.

Код:
.unibutton {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
margin:30px;
}
.unibutton:hover {
text-decoration: none;
}
.unibutton:active {
position: relative;
top: 1px;
}
Теперь создадим подкласс и зададим цвет кнопкам, причем мы можем создавать сколь угодно много таких подклассов и делать разноцветные кнопки:

Код:
.orange {
color: #FFF;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
Мы задаем любому HTML-объекту стиль кнопки и подстиль цвета и получаем результат:

Код:
<a href="#" class="unibutton orange">Оражневая кнопка</a>

вроде все понятно ,а что не понятно пишите комменты

Можешь почитать и вот эту статейку "HTML теги blockquote"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element