Немного о кнопках

  1. Главная страница
  2. Кнопки и иконки
  3. CSS
12 февраля
21 сентября
Немного о кнопках
irbees2008
  • 2151
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

Немного о кнопках



При помощи CSS можно создавать различные кнопки с разнообразными эффектами не прибегая к использованию картинок и JavaScript.
Стандартная кнопка, в вашем браузере, выглядит вот так:



HTML
Код:
<button>Кнопка</button>
Причём внешний вид кнопки будет зависеть не, только от браузера пользователя, но и от «темы» рабочего стола. Например, так выглядит кнопка в самых популярных браузерах (IE, Mozilla и Opera соответственно) в стандартном стиле Windows XP

buttons_1.jpg

А так она уже будет выглядеть, если пользователь предпочитает для своего рабочего стола использовать «классический стиль»

buttons_2.jpg

И конечно кнопка может измениться при применении какого-нибудь другого пользовательского стиля, например, так

buttons_3.jpg

Чтобы кнопки на Вашем сайте выглядели одинаково у всех пользователей, не нарушая задуманного дизайна, проще всего задать их внешний вид при помощи CSS.

Давайте пропишем в CSS такие параметры для тега
Код:
<button>
CSS
Код:
button {
    background: #2E8CE3; /* Цвет фона */
    padding: 7px 30px; /* Поля вокруг текста */
    font-size: 13px; /* Размер шрифта */ 
    font-weight: bold; /* Насыщенность шрифта */
    color: #FFFFFF; /* Цвет шрифта */
    text-align: center; /* Надпись на кнопке по центру */
    border: solid 1px #73C8F0; /* Параметры рамки кнопки */ 
    cursor: pointer; /* Изменение вида курсора при наведении*/
}
Теперь кнопка, у всех пользователей, будет выглядеть следующим образом

screen_2013_2_12_15-54-14_6.jpg

Параметры кода можно менять в самых широких пределах, например, для придания объёма кнопке, давайте изменим параметры рамки кнопки, заменим
CSS
Код:
border: solid 1px #73C8F0;
На такие параметры
CSS
Код:
border: outset 2px #73C8F0;
И кнопка примет такой вид

screen_2013_2_12_15-54-41_1.jpg

Теперь давайте займёмся более серьёзным «украшением» нашей кнопки. Широкие возможности даёт применение CSS3, который понимают все современные браузеры. У тех же, кто испльзует браузеры ещё не адаптированные под CSS3, просто не будут видны некоторые эффекты, что ни как не скажется на работе кнопки, поскольку все «украшательства» идут как дополнение к внешнему виду кнопки.
Для разнообразия примера, и чтоб наш код сделать более уневирсальным, давайте создадим какой-нибудь класс, например
Код:
.blue
и пропишем для него всё то же самое, что мы писали для
Код:
<button>
в первом варианте.
Теперь наш код CSS будет выглядеть следующим образом
CSS
Код:
.blue {
    background: #2E8CE3;
    padding: 7px 30px;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    border: solid 1px #73C8F0;
    cursor: pointer;
    }
Для чего создаются классы? Например на Вашем сайте есть два вида кнопок созданных с помощью разных тегов,
Код:
<button>
и
Код:
<input>
и Вы хотите чтоб в одном случае кнопка имела стандартный вид (по умолчанию определяемым браузером), а в другом случае отображалась как задумано вами, или хотите создать кнопки разных цветов, или ещё что-то. Вот тогда, в нужном Вам месте просто проставляете «класс» и, в данном случае кнопка, примет такой вид как вы хотели.
Для примера давайте создадим две кнопки, и в одном случае укажем класс, а в другом нет.
HTML
Код:
/* Кнопка без указания класса */
<form>
<input type="button" value=" Сообщение " onClick="AlertButton()">
<script>
function AlertButton()
{
window.alert("Здесь текст сообщения");
}
</script>
</form>

/* Кнопка с указанием класса */
<form>
<input class="blue" type="button" value=" Сообщение " 
onClick="AlertButton()">
<script>
function AlertButton()
{
window.alert("Здесь текст сообщения");
}
</script>
</form>

screen_2013_2_12_16-13-42_1.jpg

Скруглить углы, в кнопке, можно добавив в таблицу стилей следующий код:
CSS
Код:
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Можно так же добавить градиент:
CSS
Код:
background: 
   -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD);
background: 
   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), to(#2E8CE3));

То есть, полностью код будет теперь выглядеть так:
CSS
Код:
.blue {
    background: #2E8CE3;
    padding: 7px 30px;
    font-size: 13px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    border: solid 1px #73C8F0;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: 
    -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD);
    background: 
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), to(#2E8CE3));
    }

buttons_4.png

Для придания кнопке объёма можно добавить внутреннюю тень, путём добавления белой полоски в верхней её части:
CSS
Код:
box-shadow: inset 0 1px 0 0 #FFFFFF;
-moz-box-shadow: inset 0 1px 0 0 # FFFFFF;
-webkit-box-shadow: inset 0 1px 0 0 # FFFFFF;

А для контраста нижний край рамки сделаем более тёмным:
CSS
Код:
border-bottom-color: #196ebb;

Так же добавим тень для текста, что сделает кнопку более выразительной:
CSS
Код:
text-shadow: 0 -1px 0 #196ebb;

buttons_5.png

Как видите вариантов огромное количество, можно экспериментировать с любыми параметрами. Например давайте создадим полупрозрачную тень вокруг кнопки. Для этого заменим
CSS
Код:
-moz-box-shadow: inset 0 1px 0 0 # FFFFFF;
-webkit-box-shadow: inset 0 1px 0 0 # FFFFFF;
border-bottom-color: #196EBB;
text-shadow: 0 -1px 0 #196EBB;

На такие параметры
CSS
Код:
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

buttons_6.png

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

screen_2013_2_12_16-18-12_1.jpg

Для ещё лучшего эффекта хорошо добавить параметры, чтоб кнопка меняла вид при наведению на неё курсора, а так же при нажатии на кнопку. Это делается с помощью псевдо классов
Код:
:hover и :active
Добавим псевдо класс
Код:
:hover
к первому варианту кнопки, т.е. к тегу
Код:
<button>
изменим цвет кнопки при наведении на неё курсора мыши. В таблице стилей сделаем такую запись.
CSS
Код:
button:hover { 
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
}

С помощью псевдо класса
Код:
:active
создадим эффект нажатия, например, к коду использованному при наведении мыши добавим тёмную тень вверху и слева внутренней части кнопки, а так же сместим текст вправо и вниз:
CSS
Код:
button:active {
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
box-shadow: inset 1px 1px 0 0 #004A7F;
-moz-box-shadow: inset 1px 1px 0 0 #004A7F;
-webkit-box-shadow: inset 1px 1px 0 0 #004A7F;
padding: 8px 29px 6px 31px;
}

screen_2013_2_12_16-19-43_3.jpg

То есть, окончательный вариант CSS для Вашей кнопки должен принять примерно такой вид (показан вариант самого последнего вида кнопки)
code HTML
Код:
<button>Кнопка</button>

CSS
Код:
button {
background: #2E8CE3;
padding: 7px 30px;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
border: solid 1px #73C8F0;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
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 #FFFFFF;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

button:hover { 
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
}

button:active {
background: #2E69E3; 
background: -moz-linear-gradient(0% 100% 90deg, #2E69E3, #59C2FF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#59C2FF), 
to(#2E69E3));
box-shadow: inset 1px 1px 0 0 #004A7F;
-moz-box-shadow: inset 1px 1px 0 0 #004A7F;
-webkit-box-shadow: inset 1px 1px 0 0 #004A7F;
padding: 8px 29px 6px 31px;
}

Ну и проверить все можно чуть ниже .

Можешь почитать и вот эту статейку "Добавляем к ссылкам и картинкам всплывающие подсказки Tooltips"

mistakes

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

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

Ваше мнение

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

Архив

Облако тегов

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