Разное

Html button style: HTML button style Attribute — Dofactory

15.06.2023

Как центрировать кнопку в CSS

следующий → ← предыдущая

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

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

  • text-align: center — Установив значение свойства text-align родительского тега div по центру.
  • маржа: авто — путем установки значения свойства маржи на авто.
  • display: flex — путем установки значения свойства display на flex и значения свойства justify-content на center .
  • дисплей: сетка — Путем установки значения свойства отображения на сетку.

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

Пример

В этом примере мы используем text-align и установите для него значение center . Его можно поместить либо в тег body, либо в родительский тег div элемента.

Здесь мы размещаем text-align: center; в родительском теге div элемента кнопки.

<голова> <мета-кодировка="UTF-8">Кнопка выравнивания по центру <стиль> .контейнер{ выравнивание текста: по центру; граница: 7 пикселей сплошного красного цвета; ширина: 300 пикселей; высота: 200 пикселей; отступы сверху: 100px; } #бтн{ размер шрифта: 25px; } <тело> <дел>

Протестируйте сейчас

Выход

Пример

В этом примере мы используем display: grid; свойство и поле : авто; недвижимость. Здесь мы размещаем display: grid; в родительском теге div элемента кнопки.

Кнопка будет располагаться по центру горизонтального и вертикального положения.

<голова>Кнопка выравнивания по центру <стиль> .контейнер { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошного красного цвета; отображение: сетка; } кнопка { цвет фона: голубой; черный цвет; размер шрифта: 25px; маржа: авто; } п{ размер шрифта: 25px; }

<тело> <дел>

В этом примере мы используем display: grid; и margin: auto; свойства

Протестируйте сейчас

Выход

Пример

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

Этот пример поможет нам разместить кнопку в центре горизонтального и вертикального положения.

<голова>Кнопка выравнивания по центру <стиль> .контейнер { ширина: 300 пикселей; высота: 300 пикселей; граница: 5 пикселей сплошного красного цвета; дисплей: гибкий; выравнивание содержимого: по центру; выравнивание элементов: по центру; } кнопка { цвет фона: голубой; черный цвет; размер шрифта: 25px; } <тело> <дел>

Протестируйте сейчас

Выход

Следующая темаКак изменить цвет фона в CSS

← предыдущая следующий →

Как создать кнопки электронной почты только с помощью HTML и CSS

Как создать кнопки электронной почты только с помощью HTML и CSS

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

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

Каждый клиент обрабатывает HTML и CSS по-разному, но мы по-прежнему хотим, чтобы он делал то же самое в каждом клиенте. При создании HTML-кнопки для электронной почты возникают две основные проблемы.

  • Гибкость
  • Кликабельность

В большинстве случаев, когда люди создают кнопку, они используют либо границу, либо отступ. Хотя кнопка, созданная с рамкой, очень гибкая (размеры указывать не нужно) и нажимается вся кнопка, она не работает в Outlook. Кнопка, созданная с отступом, работает в Outlook, но кликать можно только по тексту.

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

HTML

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

 
  
      <тд>
          <таблица ячеекспейсинг="0" ячейкападдинг="0">
              
                  
                      
                          Нажмите

CSS

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

 .кнопка {
    радиус границы: 2px;
}
.кнопка {
    отступ: 8px 12px;
    граница: 1px сплошная #ED2939;
    радиус границы: 2px;
    семейство шрифтов: Helvetica, Arial, без засечек;
    размер шрифта: 14px;
    цвет: #ffffff;
    текстовое оформление: нет;
    вес шрифта: полужирный;
    отображение: встроенный блок;
}

Встроенный

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

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

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