Css кнопки для сайта: Красивые кнопки для сайта HTML + CSS — 24 готовых варианта

Верстка кнопок на сайте

Основы C++ в Unreal Engine 5

Особенности курса:

— 5 часов видео

— 53 задания

— Поддержка от автора

— Все исходники приложены

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Всякая злость происходит от бессилия.

Жан-Жак Руссо

Какие кнопки обычно встречаются на сайте? Я разделили бы их на два вида: кнопки внутри формы и кнопки-ссылки. И те и другие необходимо уметь верстать.

Кнопки внутри формы

Тег input

Вставляются тегом input, c типом submit

– что означает кнопку для отправки формы.

<input type="submit" value="Отправить">

Тег button

Вставляет на сайт кликабельную кнопку, работающую, в любом месте сайта.

Тег button по сравнению с input, располагает большими возможностями, внутри него можно вставлять любой контент (текст, изображения).

Но не надо забывать, что если при нажатии кнопки, должны отправиться данные на сервер, то теги input и button, следует поместить внутри тега form.

Теги input и button могут обрабатываться скриптом, например при событии клика.

<button type="button">Нажми меня!</button>

Пример верстки кнопок внутри формы

Button

See the Pen CSS3 responsive form by porsake (@porsake) on CodePen.

Input

See the Pen Responsive Form by porsake (@porsake) on CodePen.

Кнопки-ссылки

Практически на каждом сайте встречаются ссылки в виде тега a, но оформленные с помощью CSS, как кнопки. Чаще всего такие кнопки-ссылки, используются как элементы навигации на сайте: пункты меню, переход на следующую страницу, в рекламном блоке. Вот такие дизайнерские кнопочки не имеет смысла вставлять тегом button, лучше сразу вставлять тегом a с каким-нибудь классом или ID. Поскольку эта кнопка будет куда-то все равно ссылаться.

<a href="#">Learn More</a>

Пример верстки кнопки ссылки #1

HTML

<a href="#">Купить</a>

CSS

Тег a по умолчанию является строчным элементом, если не задать ему

display: inline-block, то к нему не применятся отступы, рамки и другие стили.

body {
  background-color: #951a46; /* цвет фона всей страницы */
  font-family: Roboto, sans-serif; /* семейство шрифта */
}

.button {
  display: inline-block; /* строчно-блочный */
  margin: 100px 400px; /* отступы от края браузера */
  padding: 20px 60px; /* расстояние от текста до края кнопки */
  background-color: #e44b9b; /* цвет кнопки */
  box-shadow: 0px 6px #f7f8e8; /* задана тень */
  border-radius: 5px; /* скругление углов */
  font-size: 27px; /* размер шрифта */
  text-transform: uppercase; /* трансформировать в заглавные буквы */
  text-decoration: none; /* не подчеркивать ссылку */
  transition: 0. 2s; /* плавный ховер эффект */
  color: #f7f8e8; /* цвет текста на кнопке */
}

.button:hover {

  background-color: #949a9a; /* замена цвета кнопки при наведении */
}

Скриншот

Пример верстки кнопки ссылки #2

HTML

<a href="#">Shop Now</a>

CSS

body {
  background-color: #3cc395;
}

.button {
  display: inline-block;
  margin: 100px 400px;
  color: #fff;
  font-family: BebasNeue;
  font-size: 160%;
  font-weight: bold;
  text-transform: uppercase;
  background-color: transparent;
  border-radius: 13px;
  border: 3px solid #fff;
  padding: 6px 20px;
}

Скриншот

• Создано 24.04.2019 10:33:30
• Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья

ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   
   [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Анимированная кнопка для сайта — создаём красивые кнопки

Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.

По началу, когда я поставил цели Яндекс.Метрики на кнопки, я скорей хотел видеть сколько было переходов (именно по кнопке), но со временем я обратил внимание, что ссылки в статье по кликабельности в разы отличаются от анимированных кнопок. В общем, на такие кнопки кликают гораздо чаще.

И поэтому я советую использовать такие кнопки на Ваших сайтах и блогах. К тому же делаются они вовсе не трудно.

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

Как создать анимированную кнопку с помощью графических заготовок

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

Итак, открываем изображение кнопки в бесплатном онлайн-редакторе Pixlr Edition. Хотя, вы можете работать в любом удобно для Вас редакторе.

Открываем изображение

Для этого достаточно выбрать нужный файл и нажать кнопку «Открыть». Если вы используете свои изображения, помните они должны быть в формате PNG (то есть поддерживать прозрачность).

Выбор нужного файла

Теперь нужно увеличить размер холста. А заодно и узнаем исходный размер изображения. Это нам понадобится в дальнейшем.

Изменение размера холста

Исходный размер 300х90 надо увеличить по вертикали, и получится 300х200. Если, что-то будет лишнее, после уберём.

Увеличив холст по вертикали, приступаем к дублированию слоя с кнопкой. Для этого достаточно просто перетащить имеющийся слой на иконку «Новый слой».

Дублирование слоя

Далее нужно сместить одно изображение ниже. Для этого используйте клавиши управления курсором. Изображения должны быть строго одно под другим. Иначе в дальнейшем получится немного не тот эффект на который Вы рассчитываете.

Смещение слоя вниз

Эффектов, которые Вы можете сделать огромное множество, это и изменение градиента, цвета, формы, прозрачности и так далее. Всё зависит от вашей фантазии.

В качестве примера, мы просто добавим призыв к действию на кнопке.

Надпись на кнопке

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

Две одинаковые кнопки

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

В качестве примера я уменьшу непрозрачность надписи. Вы же можете сделать свой эффект. Воспользуйтесь своей фантазией и в Вас получится нечто оригинальное.

Эффект прозрачности

После того, как две кнопки готовы, нужно убрать всё лишнее. Для этого используйте инструмент «Обрезка».

Обрезка лишнего

Все, изображение готово, сохраняем в формате PNG.

Сохранение

Следующим этапом, загружаем изображение на сайт. Думаю, подробно останавливаться не будем, все и так знают, как это делать. Загрузив изображение, скопируйте ссылку на него в отдельный файл, она пригодится в дальнейшем.

Копируем ссылку на изображение

Вот теперь в статье, где вы захотите вставить кнопку, надо добавить вот такой код:

<div><a href="ВАША ССЫЛКА" target="_blank" rel="nofollow"></a></div>

Обратите внимание на класс ссылки в данном коде class="button_red". Для разных кнопок, данный класс нужно будет менять и в статье и в таблице стилей. Но это делается только один раз, в дальнейшем при вставке кнопки, достаточно будет вставлять вышеуказанный  код.

Далее открываем раздел «Внешний вид» > «Редактор» > «Таблица стилей»,

Добавление кода CSS в таблицу стилей

где в самом конце добавляем следующие стили.

/*Кнопка информация о курсе*/
.button_red {
display: block;
position: relative;
width: 271px;/*Ширина кнопки*/
height: 90px;/*50% высоты изображения*/
padding: 0px;
margin: 10px auto;
line-height: 94px;/*смещение по вертикали*/
border: 0px;
background: url(http://test.1zaicev.ru/wp-content/uploads/2014/06/buttons.png) 0 0 no-repeat;}/*путь к вашей кнопке*/

.button_red:hover { background-position: 0 -92px;}/*смещение фона*/ 
.t_c { text-align: center !important}

Комментариями отмечены те параметры, которые вам придётся менять в зависимости от размеров кнопки. Тут главное понять, что если изображение по высоте 180рх, вы указываете высоту (height) 90px. И с этим значением работаете, плюс минус несколько пикселей в параметрах line-height и background-position для улучшения эффекта.

Итак, первый способ готов, скачивайте архив с заготовками.

Как сделать анимированную кнопку с помощью CSS

Данный способ позволяет создавать красивые анимированные кнопки для сайтов, только на основе стилей CSS. Делать это можно и самому, но легче использовать онлайн генераторы для создания кнопок на CSS. Я пользуюсь вот этим сервисом CSSButton. Классный, многофункциональный сервис, но англоязычный и для новичка сложноват. Поэтому, для подготовки статьи я поискал в Интернете другие генераторы кнопок. В результате чего, я отобрал несколько сервисов, которые вы можете опробовать:

CSS3 Button Generator

Sciweavers

CSS Button Generator

CSS3 Linear Gradient Buttons Generator

Генератор кнопок CSS

Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения. 1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.

В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.

Итак, начинаем.

Открываем главную страницу сервиса. Изначально перед вами будет предварительный вид кнопки и инструменты позволяющие сделать всевозможные настройки.

Предварительный вид кнопки

Первый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.

Параметры шрифта

Следующий раздел Background, относится к фону. Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.

Параметры фона

Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.

Параметры бордюров

Следующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.

Параметры трансформации

Следующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.

Параметры анимации

Попробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.

После того как первоначальный вид кнопки настроен, можно переходить к следующему этапу. Это видоизменение кнопки при наведение курсора  мышки. Для этого нажимаем на чекбокс,  указанный на скриншоте.

Параметры при наведении курсора мышки

Теперь все изменения в настройках вы делаете для кнопки, которые будут отображаться при наведении курсора мыши. И эти настройки зависят индивидуально от каждой кнопки. В качестве примера я изменил настройки поворота, градиента и цвета тени.

Вид при наведении

Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:

<a href="#">Текст ссылки</a>

Примечание: текст ссылки и будет надписью на кнопке. То есть надпись указанная в генераторе, — это лишь для предварительного просмотра.

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

Вот наш пример:

Результат

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

На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.

С уважением, Максим Зайцев.

P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок».