Как сделать красивые кнопки 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 thoughts on “Как сделать красивые кнопки css

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

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

  2. Надежда Давыдова

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

    1. Алексей Кобзарев Автор записи

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

  3. Надежда Давыдова

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

  4. Anna

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

    1. Алексей Кобзарев Автор записи

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

  5. Anna

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

    1. Алексей Кобзарев Автор записи

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

  6. Тамара

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

    1. Алексей Кобзарев Автор записи

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

      < ?php the_permalink() ?>

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

    2. Алексей Кобзарев Автор записи

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

      < ?php truncate_post($gpress_word_count); ?>

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

      1. Тамара

        Алексей, я не нашла ни первой,ни второй записи. у меня вот такой кусок

        
                        
    1. Алексей Кобзарев Автор записи

      Тамара, я для вас сделал скрин, чтобы вам было проще найти нужный кусок, вот скриншот.

  7. Тамара

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

    1. Алексей Кобзарев Автор записи

      Ничего, Татьяна, у вас все еще получиться. 🙂

Добавить комментарий

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