- 1780
- 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;
}
Ну и проверить все можно чуть ниже .
Можешь почитать и вот эту статейку "Подгрузка новостей как ВКонтакте"

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