Как сделать красивые кнопки css

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

Как сделать кнопку CSS? Благодаря стилям CSS, можно  сделать разные кнопки с какими хотите эффектами и даже не нужно ставить какие-то картинки или JavaSkripti.

Умение создавать CSS кнопки, понадобятся не только новичкам, создавшим недавно свой блог или сайт, данные знания пригодятся людям, которые хотят совершенствовать свои проекты.

  1. Стильная кнопка
  2. Пропись в значение файла
  3. Создание красивой CSS кнопки
  4. Результат на лицо

ОБЫЧНАЯ БРАУЗЕРНАЯ HTML КНОПКА, БЕЗ ДОБАВЛЕНИЯ СТИЛЕЙ CSS ВЫГЛЯДИТ ВОТ ТАК

Заметьте, что вид кнопки будет зависеть не только от браузера, которым Вы пользуетесь, а и от темы рабочего стола. Покажу пример: в самых популярных браузерах (Mozila Firefox, IE и Opera) вот так выглядят кнопки в обычном стиле Windows XP:

Как сделать кнопку css

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

стиль кнопки css

Конечно же кнопку можно изменить если применить другой стиль, вот пример кнопок:

css кнопки для сайта

А теперь создадим кнопки CSS для сайта или блога, не нарушая его дизайн:

Открывайте в папке с Вашей темой файл style.css и туда пропишем следующее

code CSSbutton {

background: #2E8CE3; /* Цвет фона */

padding: 7px 30px; /* Поля вокруг текста */

font-size: 13px; /* Размер шрифта */

font-weight: bold; /* Насыщенность шрифта */

color: #FFFFFF; /* Цвет шрифта */

text-align: center; /* Надпись на кнопке по центру */

border: solid 1px #73C8F0; /* Параметры рамки кнопки */

cursor: pointer; /* Изменим вид курсора при наведении*/

}

созданная кнопка будет выглядеть вот так

html кнопка css

Параметри кода кнопки можно заменить и сделать ее так как будет приятно видеть ее Вам! Например, придадим CSS кнопке объем, то есть изменим параметр рамки:

code CSSborder: solid 1px #73C8F0;

Поменяйте на такие параметры:

code CSSborder: outset 2px #73C8F0;

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

css нажатие кнопки

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

Если у пользователя будет старый браузер то, он просто не увидит некоторые эффекты нашей кнопки, сразу хочу предупредить, что боятся тут нечего, это ни как не отразится на работе кнопки, потому как стили CSS используются только для украшения.

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

код 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;

}

Зачем вообще нужны классы? Если Вы все повторяли за мной, значит на Вашем блоге сейчас два вида кнопок, которые мы делали с помощью тегов <input> и тега <button>, в одном случае кнопка отображается, как хотите Вы. То есть, имея разные цвета и эффекты, в другом режиме, кнопка имеет стандартный вид определенным по умолчанию Вашим браузером.

Отвечая на вопрос: зачем нужны классы — в нужном Вам месте ставьте класс и тогда кнопка примет такой вид и цвет как вы и хотели.

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

<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 нажатая кнопка

Сделаем округлые углы в кнопках, написав следующее:

code CSSborder-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Добавим к кнопке градиент:

code CSSbackground:

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

красивые кнопки css_2

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

code CSSbox-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 CSSborder-bottom-color: #196ebb;

Добавим тень для текста – это сделает нашу кнопку более выразительной:

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

красивые кнопки css_3

Последний пример

Сделаем классный эффект, при наведении мышки на кнопку она будет меняться и при нажатии на нее, то есть сделаем CSS нажатие кнопки. Сделаем это при помощи класса: hover и класса:active. Давайте присоединим псевдо-класс: hover к тегу <button>, изменим цвет кнопки для отличия (при наведении курсора мыши), в стилях нашей таблицы сделаем такую запись:

code CSSbutton: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 CSSbutton: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 CSSbutton {

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 кнопки, придав им любой вид и поставить эти кнопки, где Вам удобно, на блоге или сайте! Если у Вас появились какие-то трудности с CSS кодом, пишите в комментариях к статье, постараюсь помочь.

С уважением, Алексей Кобзарев

18 комментариев

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *