Css button style: 92 Beautiful CSS buttons examples

Leave a Comment / Css / By /

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

  • Руководство пользователя Jotform
  • Как создавать лучшие формы
  • Как настроить кнопку отправки с помощью CSS

18 февраля 2022 г.

ОБНОВЛЕНИЕ. Попробуйте видеокурс «Дизайнер форм», чтобы создать фантастические стили кнопки «Отправить»!

Знаете ли вы, что зеленый и синий — самые расслабляющие цвета? Вот почему они используются самыми популярными веб-сайтами, чтобы помочь пользователям чувствовать себя комфортно при просмотре этих веб-сайтов. Кнопки отправки в веб-формах также должны быть удобными, потому что именно там люди делятся наиболее конфиденциальной информацией.

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

Изменение внешнего вида кнопки отправки

  1. В конструкторе форм щелкните значок Form Designer .
  2. Перейдите на вкладку Стили .
  3. Прокрутите вниз до раздела Inject Custom CSS .
  1. Примените собственные правила CSS или используйте следующий код:
 .form-submit-button {
фон: #0066A2;
белый цвет;
стиль границы: начало;
цвет границы: #0066A2;
высота: 50 пикселей;
ширина: 100 пикселей;
шрифт: жирный, 15px, arial, без засечек;
тень текста: нет;
}

Вот как это будет выглядеть потом:

Детали кода CSS для кнопки отправки

  • .form-submit-button — селектор кнопки отправки в вашей форме.
  • фон – устанавливает цвет фона за текстом.
  • цвет — определяет цвет вашего текста.
  • border-style — устанавливает стиль границ кнопки отправки.
  • border-color — устанавливает цвет границ кнопки отправки.
  • height — устанавливает высоту вашей кнопки и указывается в пикселях.
  • ширина – задает ширину вашей кнопки и указывается в пикселях.
  • шрифт – устанавливает свойства шрифта.

ПРИМЕЧАНИЕ. Не забудьте добавить точку с запятой (;) после каждого свойства.

Эффект наведения кнопки отправки

Перейдите к разделу Inject Custom CSS в конструкторе форм, используя описанные выше шаги, и введите следующий код:

 .form-submit-button {
фон: #B9DFFF;
цвет: #fff;
граница: 1px сплошная #eee;
радиус границы: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}
.form-submit-button: hover {
фон: #016ABC;
цвет: #fff;
граница: 1px сплошная #eee;
радиус границы: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}

Вот как кнопка выглядит в состоянии покоя и при наведении курсора:

Детали каждого кода CSS3 для кнопки отправки

  • .form-submit-button:hover — это класс, когда мышь наводит курсор на кнопку отправки . Все остальные поля остаются прежними, за исключением фона, чтобы показать, что происходит при наведении мыши.
  • border-radius — закругляет угол ваших кнопок отправки.
  • box-shadow — устанавливает тень для кнопки отправки.
  • text-shadow — устанавливает тень для текста внутри кнопки отправки (не применяется к примеру).

Как дела? Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.

Было ли это руководство полезным?

Нам очень жаль это слышать. Какая проблема у вас была с гидом?

Не ответил на мой вопросСлишком сложныйУстаревший Проблема с переводомПроблема с образцом/кодомДругое

Как мы можем улучшить это руководство?

Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Кнопка является неотъемлемым элементом любого дизайна. Он должен выглядеть и вести себя как интерактивный элемент вашей страницы.

Пример

HTML

 <кнопка>Кнопка

Класс кнопки можно использовать на:

Пример

Анкер

HTML

 Якорь

Цвета #

Кнопка доступна во всех различных цветах , определенных картой $colors Sass.

Пример

HTML

Пример

HTML

 <дел>
<дел>

Каждый цвет теперь доступен в своей светлой версии . Просто добавьте модификатор is-light к модификатору цвета, чтобы применить светлую версию кнопки.

Пример

HTML

 <дел>
<дел>

Размеры #

Кнопка поставляется в 4 разных размерах:

  • маленький
  • обычный
  • средний
  • большой

Хотя размер по умолчанию —

нормальный , модификатор is-normal существует на тот случай, если вам нужно сбросить кнопку до ее нормального размера.

Пример

HTML

Вы можете изменить размер нескольких кнопок одновременно, поместив их в родителя кнопок и применив один из 3 модификаторов:

  • пуговицы-маленькие
  • пуговицы средние
  • кнопки большие

Пример

HTML

 <дел>

Вы можете изменить размер только подмножества кнопок , просто применив к ним класс модификатора.


Например, если вы хотите, чтобы все кнопки были размером , маленькими , но при этом одна из них имела обычный размер , просто сделайте следующее:

Пример

HTML

 <дел>

Адаптивные размеры #

Новинка! 0.9.4

Если вам нужны разные размеры кнопок для каждой точки останова, вы можете использовать отзывчивые кнопки Bulma . Просто добавьте модификатор is-responsive :

Имя Фиксированный размер
Адаптивный размер (измените размер окна, чтобы увидеть в действии) 		Код
По умолчанию
 <кнопка>
  По умолчанию
Маленький
 <кнопка>
  Маленький
Обычный
 <кнопка>
  Обычный
Средний
 <кнопка>
  Середина
Большой
 <кнопка>
  Большой

Открыть таблицу в новом окне

Вы можете настроить размеры, перезаписав переменную $button-responsive-sizes Sass.

Дисплеи #

Пример

HTML

Стили #

Контурный

Пример

HTML
Инвертированный (цвет текста становится цветом фона и наоборот)
Инвертировать контур (инвертированный цвет становится цветом текста и границ)
Закругленные кнопки

состояния #

Bulma стилизует различные состояний своих кнопок. Каждое состояние доступно как псевдокласс и класс CSS:

  • :hover
    и is-hover
  • :фокус и фокусируется на
  • :активен и активен

Это позволяет вам получить стиль определенного состояния, не вызывая его.

Обычный

Пример

HTML
Наведение

Пример

HTML
Фокус

Пример

HTML
Активный

Пример

HTML
Загрузка

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

Вы можете создать неинтерактивную кнопку , используя модификатор is-static . Это полезно для выравнивания текстовой метки с вводом, например, при использовании надстроек формы.

Статический

 Статический
Отключено

Bulma поддерживает использование атрибута disabled Boolean HTML, который не позволяет пользователю взаимодействовать с кнопкой.

Класс CSS is-disabled объявлен устаревшим в пользу атрибута disabled HTML. Подробнее
Со значками Font Awesome

Кнопки Bulma можно легко улучшить, добавив значок Font Awesome . Для достижения наилучших результатов поместите внутренний текст в отдельный элемент .

Пример

HTML

 <р>
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  




  <кнопка>
    <диапазон>
      <я>
    
    GitHub
  
  <кнопка>
    <диапазон>
      <я>
    
    @jgthms
  
  <кнопка>
    <диапазон>
      <я>
    
    Сохранить
  
  <кнопка>
    Удалить
    <диапазон>
      <я>
    
  




  <кнопка>
    <диапазон>
      <я>
    
    GitHub
  
  <кнопка>
    <диапазон>
      <я>
    
    GitHub
  
  <кнопка>
    <диапазон>
      <я>
    
    GitHub
  
  <кнопка>
    <диапазон>
      <я>
    
    GitHub

Если кнопка содержит только значок, Bulma позаботится о том, чтобы кнопка оставалась размером квадратов независимо от размера кнопки или значка.

 

  <кнопка>
    <диапазон>
      <я>
    
  


<р>
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  


<р>
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  


<р>
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>
    
  
  <кнопка>
    <диапазон>
      <я>

Группа кнопок #

Если вы хотите сгруппировать кнопки вместе на одной строке , используйте модификатор is-grouped в контейнере поля :

Пример

HTML

 <дел>
  <р>
    <кнопка>
      Сохранить изменения
    
  

  <р>
    <кнопка>
      Отмена
    
  

  <р>
    <кнопка>
      Удалить сообщение

Аддоны кнопок #

Если вы хотите использовать кнопки в качестве надстроек , используйте модификатор has-addons в контейнере поля :

Пример

HTML

 <дел>
  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Влево
    
  

  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Центр
    
  

  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Вправо

Группа кнопок с надстройками #

Вы также можете группировать дополнения:

Пример

HTML

 <дел>
  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Жирный
    
  

  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Курсив
    
  

  <р>
    <кнопка>
      <диапазон>
        <я>
      
      Подчеркнуть
<дел> <р> <кнопка> <диапазон> <я> Влево

<р> <кнопка> <диапазон> <я> Центр

<р> <кнопка> <диапазон> <я> Вправо

Список кнопок #

Вы можете создать список кнопок с помощью контейнера кнопок .

 <дел>

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

 <дел>

Вы можете прикрепить кнопки вместе с модификатором has-addons .

 <дел>

Используйте модификаторы is-centered или is-right , чтобы изменить выравнивание .

 <дел>