Кнопки в CSS

Создание кнопок при помощи CSS

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

Стандартная кнопка, в вашем браузере, выглядит следующим образом:

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

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

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

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

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

Давайте пропишем в CSS такие параметры для тега <button>

code CSS

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

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

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

code CSS border: solid 1px #73C8F0;

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

code CSS border: outset 2px #73C8F0;

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

Теперь давайте займёмся более серьёзным «украшением» нашей кнопки. Широкие возможности даёт применение CSS3, который понимают все современные браузеры. У тех же, кто испльзует браузеры ещё не адаптированные под CSS3, просто не будут видны некоторые эффекты, что ни как не скажется на работе кнопки, поскольку все «украшательства» идут как дополнение к внешнему виду кнопки.

Для разнообразия примера, и чтоб наш код сделать более уневирсальным, давайте создадим какой-нибудь класс, например .blue и пропишем для него всё то же самое, что мы писали для <button> в первом варианте.

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

code 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> и Вы хотите чтоб в одном случае кнопка имела стандартный вид (по умолчанию определяемым браузером), а в другом случае отображалась как задумано Вами, или хотите создать кнопки разных цветов, или ещё что-то. Вот тогда, в нужном Вам месте просто проставляете «класс» и, в данном случае кнопка, примет такой вид как Вы задумали.

Для примера давайте создадим две кнопки, и в одном случае укажем класс, а в другом нет. Для наглядности я кнопки сделаю рабочими

code 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>

Скруглить углы, в кнопке, можно добавив в таблицу стилей следующий код:

code CSS

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Можно так же добавить градиент:

code CSS

background: 
   -moz-linear-gradient(0% 100% 90deg, #2E8CE3, #73C2FD);
background: 
   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#73C2FD), to(#2E8CE3));

То есть, полностью код будет теперь выглядеть так:

code 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));
    }

Для придания кнопке объёма можно добавить внутреннюю тень, путём добавления белой полоски в верхней её части:

code 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;

А для контраста нижний край рамки сделаем более тёмным:

code CSS border-bottom-color: #196ebb;

Так же добавим тень для текста, что сделает кнопку более выразительной:

code CSS text-shadow: 0 -1px 0 #196ebb;

Как видите вариантов огромное количество, можно экспериментировать с любыми параметрами. Например давайте создадим полупрозрачную тень вокруг кнопки. Для этого заменим

code 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;

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

code 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> изменим цвет кнопки при наведении на неё курсора мыши. В таблице стилей сделаем такую запись.

code 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 создадим эффект нажатия, например, к коду использованному при наведении мыши добавим тёмную тень вверху и слева внутренней части кнопки, а так же сместим текст вправо и вниз:

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

Создание кнопок при помощи CSS

Статьи

Фоны для сайта

Основы HTML

Разное