Как сделать красивые кнопки 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 комментариев
  1. Руслан:

    Отличные кнопки. Нужно взять себе на заметку.

  2. Александр Иванович:

    Отличная статья. Давно хотел научиться делать красивые CSS кнопки, для сайтов.
    Спасибо

  3. Алексей, как Вы всему этому научились? У меня к этому душа не лежит, психовать начинаю, когда не получается 🙂 . Супер, сам все сделал. А Вы из Луганска? Я живу в Ровеньках, совсем рядом 🙂

    • Вы правы — это сложно и иногда раздражает, но по началу. Главное понять принцип CSS и пойдет все как по маслу.
      Ровеньки от Луганска не далеко, совсем близко.

  4. Так Вы из Луганска? 😳 Мне просто Вебвизор подсказал 🙂 Приятно видеть своих земляков 🙂

  5. Anna:

    Алексей, здравствуйте! Статья очень полезная и нужная. Но при этом возникает много вопросов. Вы не могли бы рассказать, как сделать такие кнопочки, как у вас в рубриках? Напишите такую статью. Мне очень нравятся они. Это же сайт бар, значит у вас есть коды этих кнопочек. Вы не хотите ими поделиться? С уважением, Анна. 😉 ❗

    • Анна, там такая же технология только другой цвет и при наведении (атрибут hower) она съезжает вправо. Если хотите эти кнопки к себе на блог, то я могу скинуть их код к вам на почту. Нужны?

  6. Anna:

    Ох, уж эти коды… Достали… Вот вы написали коды, указали файл, куда их нужно вставить… А куда конкретно? Вначале или в конце? Перед или после какого слова? Вы меня извините за, может быть, нелепые, как для вас, вопросы, но я не знаю, что мне делать с такими кодами… поэтому и задаю вопросы несуразные… С уважением, Анна.Вот мне, например, нравится текст в такой бы рваной рамочке или это будет картинка, скриншот, неважно. А как её сделать? Я увидела у вас эту картинку, но куда надо вставить код, чтобы получить такую как бы рамочку для текста? И как пользоваться кодом, ведь не всегда нужна именно такая рамочка.Короче, я вам совсем задурила голову… С уважением, Анна. ❗

    • Эти коды не ставятся в определенное место, а по вашему желанию, например, мне нужно сделать ссылку в сайдбаре красивой кнопкой, тогда я беру CSS код из этой статьи и добавляю его в файл style.css и в ту ссылку вставляю class, который тоже есть в статье. Все, моя кнопка готова. А рамка сделана с помощью программы Snagit. В этой статье про оптимизацию изображений, все о ней рассказано, читайте с подзаголовка «Как сделать скриншот с экрана своего компьютера».

  7. Здравствуйте, Алексей. Спасибо за полезную статью о кнопках. Всё подробно расписано, осталось только применить. Сайт ваш замечательный, много интересных статей. Буду к вам приходить и учиться. Шаблон моего сайта похож на ваш, но нет кнопки ЧИТАТЬ ДАЛЕЕ.У меня вопрос, в какое место вордпресса надо вставить код кнопки?

    • Здравствуйте, Тамара!
      Мне очень приятно, что вам понравился мой блог и вы будете читать его дальше. Код кнопки — читать далее, вставляйте в файле index.php, сразу после

      < ?php the_permalink() ?>

      Код нужен или он у вас есть?

    • У вас может не быть того, кода, который я дал в прошлом комментарии, но этот

      < ?php truncate_post($gpress_word_count); ?>

      должен быть. Вот, после него ставьте.

  8. Что-то не вижу своего кода, хотела скрин послать,тоже не вижу где…

  9. Алексей, спасибо за подсказку. Ваш код почему-то не подошёл к моему шаблону, но всё равно очень пригодился. Нашла наконец место, где вставляется кнопка. Хотела сделать с классом, но не получилось. Сделала с картинкой.

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Подписка на свежий дайджест на блоге
Полезные ссылки
Создать интернет магазин бесплатно
Создать WordPress блог
Официальный мухлеж
Естественные ссылки
Создание сайтов и продвижение сайтов
Создание сайтов и продвижение сайтов
© 2019 Блог Алексея Кобзарева
Яндекс.Метрика