Хаки и Скрипты 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;
}

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

Можешь почитать и вот эту статейку "Обалденные эффекты для кнопок на CSS3"

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

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