Хаки и Скрипты Next Generation CMS : Кнопки и иконки, CSS : Немного о кнопках

irbees2008 Опубликовано - 12 - февраля Кнопки и иконки

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

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

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

HTML

Код:

<button>Кнопка</button>

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

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

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

Чтобы кнопки на Вашем сайте выглядели одинаково у всех пользователей, не нарушая задуманного дизайна, проще всего задать их внешний вид при помощи 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; /* Изменение вида курсора при наведении*/
}

Теперь кнопка, у всех пользователей, будет выглядеть следующим образом

Параметры кода можно менять в самых широких пределах, например, для придания объёма кнопке, давайте изменим параметры рамки кнопки, заменим
CSS

Код:

border: solid 1px #73C8F0;

На такие параметры
CSS

Код:

border: outset 2px #73C8F0;

И кнопка примет такой вид

Теперь давайте займёмся более серьёзным «украшением» нашей кнопки. Широкие возможности даёт применение 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>

Скруглить углы, в кнопке, можно добавив в таблицу стилей следующий код:
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));
    }

Для придания кнопке объёма можно добавить внутреннюю тень, путём добавления белой полоски в верхней её части:
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;

Как видите вариантов огромное количество, можно экспериментировать с любыми параметрами. Например давайте создадим полупрозрачную тень вокруг кнопки. Для этого заменим
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);

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

Для ещё лучшего эффекта хорошо добавить параметры, чтоб кнопка меняла вид при наведению на неё курсора, а так же при нажатии на кнопку. Это делается с помощью псевдо классов

Код:

: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;
}

То есть, окончательный вариант 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;
}

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

Можешь почитать и вот эту статейку "Небольшое дополнение для слайдера и не только"

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

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