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

  1. Главная страница
  2. Кнопки и иконки
  3. CSS
12 февраля
21 сентября
Немного о кнопках
irbees2008
  • 1901
  • 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;
}

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

Можешь почитать и вот эту статейку "auth_social - авторизация через соцсети "

mistakes

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

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

Ваше мнение

TWIG -что это?
Результаты

Архив

Облако тегов

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