3575
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: Справочник
Немного о кнопках
При помощи CSS можно создавать различные кнопки с разнообразными эффектами не прибегая к использованию картинок и JavaScript.
Стандартная кнопка, в вашем браузере, выглядит вот так:
HTML
Код:
<button>Кнопка</button>
А так она уже будет выглядеть, если пользователь предпочитает для своего рабочего стола использовать «классический стиль»
И конечно кнопка может измениться при применении какого-нибудь другого пользовательского стиля, например, так
Чтобы кнопки на Вашем сайте выглядели одинаково у всех пользователей, не нарушая задуманного дизайна, проще всего задать их внешний вид при помощи CSS.
Давайте пропишем в CSS такие параметры для тега
Код:
<button>
Код:
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;
}
Ну и проверить все можно чуть ниже .
Можешь почитать и вот эту статейку "Вставка музыки"
Это тоже интересно
- 12.02.15Аннимированные кнопки иконки
- 04.01.14Изменяем вид цитат
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.