Кнопка css: Buttons Основные стили кнопок CSS уроки для начинающих академия

Граница кнопки CSS | Руководство по работе с границей кнопок CSS

Обновлено 27 июня 2023 г.

В этой статье мы обсуждаем границы кнопок в CSS. Как правило, кнопка служит кликабельным элементом, запускающим действие, например переход на другую страницу или выполнение определенного действия. В этой статье основное внимание уделяется применению границ к кнопкам. Мы исследуем, как свойство границы используется для добавления границ к кнопкам. Кроме того, мы используем свойство border-radius для оформления границ кнопок и получения закругленных углов. Мы также можем создать двойную обводку, добавив еще одно свойство границы к внутреннему элементу span, уменьшив свойство border-radius.

Работа с границей кнопки CSS

Разработчики используют границы в CSS для оформления кнопок. В этой статье мы обсуждаем, как стилизовать кнопки, используя свойства border-radius. В большинстве случаев разработчики не используют рамки для стилизации кнопок.

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

Синтаксис:

  текст или название кнопки  

Примеры границы кнопки CSS

Ниже приведены следующие примеры:

Пример #1

Код:

 

<голова>


<тело>
 
Элемент кнопки CSS
 
Нажми на меня!

 

Вывод:

После нажатия на кнопку

В приведенной выше программе мы видели простое создание кнопки, которая создаст кнопку с именем «щелкни меня». сообщение «Hello Educba».

Давайте рассмотрим общий пример того, как вы можете объявить границы при создании кнопок.

Пример #2

Код:

 

<голова>

<стиль>
. button1 {
цвет фона: синий;
граница: нет;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
.button2 {
цвет фона: синий;
граница: пунктирная;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
.button3 {
цвет фона: синий;
граница: двойная;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
 

<тело>
 
Свойство кнопки CSS
 
Кнопка без рамки 
Кнопка с пунктирной рамкой
Кнопка с двойной рамкой

 

Вывод:

В приведенной выше программе мы видим, что мы разработали три кнопки со свойствами границ. Как и в случае с первой кнопкой, мы не применяли какое-либо свойство границы, указав для него значение «none»; во второй кнопке мы указали ее как «точечную», а в третьей кнопке мы указали границу как «двойную».

В нескольких примерах мы также используем свойство border-radius для кнопок в CSS. Свойство border-radius применяет закругленные углы к контроллеру. Давайте посмотрим на пример этого, и он работает.

Пример #3

Код:

 

<голова>

<стиль>
.button1 {
цвет фона: красный;
граница: нет;
радиус границы: 5px;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
.button2 {
цвет фона: синий;
граница: пунктирная;
радиус границы: 9px;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
.button3 {
цвет фона: зеленый;
граница: двойная;
радиус границы: 9пкс;
черный цвет;
отступ: 15px 32px;
выравнивание текста: по центру;
размер шрифта: 16px;
поля: 4px 2px;
}
 

<тело>
 
Свойство кнопки CSS
 
Кнопка без рамки 
Кнопка с пунктирной рамкой
Кнопка с двойной рамкой

 

Вывод:

В приведенной выше программе мы указали все три кнопки с радиусом кнопки, первую кнопку мы указали как «5px», а вторую и третью кнопки с радиусом кнопки как «9px».

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

Пример #4

Код:

 

<голова>

<стиль>
.dislodged-граница {
фон: #FB3FDE;
радиус границы: 30px;
цвет: #fff;
отображение: встроенный блок;
семейство шрифтов: без засечек;
отступ: 15px 20px 14px;
положение: родственник;
текстовое оформление: нет;
}
.смещенная граница,
.dislodged-border: перед {
радиус границы: 30px;
box-sizing: граница-коробка;
}
.dislodged-border: перед {
граница: 2px сплошная #FB3FDE;
содержание: "";
дисплей: блок;
высота: 100%;
положение: абсолютное;
ширина: 100%;
верх: 5 пикселей;
слева: 3px;
z-индекс: -1;
}
 

<тело>
 
Элемент кнопки CSS
 
Кнопка

 

Вывод:

В приведенной выше программе мы видим, что у нас есть вывод, где сначала цвет фона кнопки розовый, и это похоже на кнопку встроенного блока, и когда мы нажимаем на эту кнопку, мы получить смещенный элемент управления, где мы получаем синий контур. В приведенном выше коде мы указываем белый цвет в качестве цвета шрифта, поскольку мы указываем свойство отображения как встроенный блок, что создает встроенный элемент, который придает кнопке красивый сливовый вид; мы указываем отступы, которые используются для интервала текста, мы также указали позицию со значением как «относительное», что делает абсолютное позиционирование элемента.

Указана смещенная граница: перед, которая используется для применения к самой кнопке, а также определена согласованность, а также мы указали радиус границы, размер окна со значением границы, потому что, когда мы объявляем стили смещенной границы, мы указываем border-box как значение свойства box-sizing.

Заключение

В этой статье мы пришли к выводу, что кнопки используются для событий действий. Разработчики могут объявить эти кнопки, назначив им имя и используя различные типы, такие как переключатели, простые кнопки и т. д. Кроме того, разработчики могут создавать эти кнопки, используя различные свойства стилей CSS, такие как граница, цвет, цвет фона, размер шрифта, отступы и многое другое. В этой статье основное внимание уделяется свойству, применяемому к кнопкам для стилизации: границам. Как правило, дизайнеры и разработчики предпочитают простые кнопки кнопкам с рамкой, потому что они предлагают более четкое определение. В статье рассматриваются различные стили границ, такие как сплошная, пунктирная, двойная и другие, которые разработчики могут применять к кнопкам. Мы также видели смещенные границы, применяемые к кнопкам.

Рекомендуемые статьи

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

1. Переполнение CSS
2. Переполнение в CSS
3. Цвет границы CSS
4. Цвет CSS Прозрачный

Кнопки — Начальный набор Tailwind CSS

Кнопочные компоненты, использующие Tailwind CSS для ускорения вашего проекта.

Вы можете редактировать код в любом редакторе и видеть изменения вживую!

Размеры кнопки

Различные размеры компонента кнопки.

Ссылка

 
 Большой 
 
 Обычный 
 
  Маленький 
 
 Ссылка 
 
  
 

Кнопка блокировки

Полноразмерная кнопка блокировки.

 
 Кнопка с большим блоком 
 

Цвета кнопок

Некоторые цветовые вариации.

 
 Опасность 
 
 Успех 
 
 Информация 
 
 Вторичный 
 
 Розовый 
 
 Фиолетовый 
 
 Белый 
 

Кнопка с контуром

Кнопка с контуром.

 
 Контур 
 

Кнопка со значком справа

Кнопка со значком SVG справа.

 
  
 
 Со значком 
 
  
 
  
 

Кнопка со значком слева

Кнопка со значком SVG слева

 
  
 
  172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.6 56Л10 17.657л-6.828- 6.829a4 4 0 010-5.656z" clip-rule="evenodd" fill-rule="evenodd"> 
 
 Со значком 
 
  
 

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

Группа из двух или более кнопок.

Влево Посередине Вправо

 
 
 
 
 Левая 
 
 Средняя 
 
 Правая 
 
 
 
 

Кнопка-таблетка

Кнопка с полностью закругленными сторонами.

Кнопка-таблетка

 
 Кнопка-таблетка 
 

Кнопка со значком

Кнопка со значком.

<кнопка> 657l-6.828-6.829a4 4 0 0 10-5.656z » clip-rule=»evenodd» fill-rule=»evenodd»> <кнопка>

<кнопка>

 
 
 
 
 < svg viewBox="0 0 20 20">