При помощи 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 будет выглядеть следующим образом
Для чего создаются классы? Например на Вашем сайте есть два вида кнопок созданных с помощью разных тегов, <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-bottom-color: #196ebb;
Так же добавим тень для текста, что сделает кнопку более выразительной:
code CSS text-shadow: 0 -1px 0 #196ebb;
Как видите вариантов огромное количество, можно экспериментировать с любыми параметрами. Например давайте создадим полупрозрачную тень вокруг кнопки. Для этого заменим
А так, для сравнения возьму последний вариант, будет выглядеть данная кнопка в вашем браузере
Для ещё лучшего эффекта хорошо добавить параметры, чтоб кнопка меняла вид при наведению на неё курсора, а так же при нажатии на кнопку. Это делается с помощью псевдо классов :hover и :active
Добавим псевдо класс :hover к первому варианту кнопки, т.е. к тегу <button> изменим цвет кнопки при наведении на неё курсора мыши. В таблице стилей сделаем такую запись.
С помощью псевдо класса :active создадим эффект нажатия, например, к коду использованному при наведении мыши добавим тёмную тень вверху и слева внутренней части кнопки, а так же сместим текст вправо и вниз:
