3.9 KiB
title | localeTitle |
---|---|
CSS Buttons | Кнопки CSS |
Кнопки CSS
- Вы можете создать любую кнопку clickable (элемент HTML
<button>
)
<button>Click Me</button>
- Кнопка по умолчанию выглядит следующим образом:
Стилизация кнопки
Вы можете изменить несколько свойств кнопки, чтобы изменить ее внешний вид.
Чтобы добавить тени к кнопке, используйте свойство box-shadow
.
Чтобы добавить прозрачность к кнопке для отключенного эффекта, используйте opacity
свойства.
Чтобы удалить поля и создать группу кнопок, добавьте свойство float:left/right
.
Чтобы создать группу кнопок, но с границами, используйте свойство float
и добавьте border property
.
Для создания вертикальной группы кнопок используйте display: block property
.
Цвет кнопки
Чтобы изменить цвет фона кнопки, используйте свойство background-color:
button {background-color: #6ba0f4;}
Чтобы добавить цветную рамку к кнопке, используйте свойство border:
button {
background-color: #FFF;
color: #FFF;
border: 2px solid #6ba0f4;
}
Размер текста кнопки
Чтобы изменить размер шрифта текста на кнопке, используйте свойство font-size:
button {font-size: 20px;}
Пусковая площадка
Чтобы изменить прописку кнопки, используйте свойство padding:
button {padding: 15px 30px;}
Ширина кнопки
Чтобы изменить ширину кнопки, независимо от текстового содержимого, используйте свойство width:
button {width: 250px;}
Закругленные кнопки
Чтобы создать закругленные кнопки, используйте свойство border-radius:
button {border-radius: 50%;}
Напольные кнопки
Чтобы изменить стиль кнопки при перемещении мыши над ней, используйте селектор: hover:
button:hover {
background-color: #0E2C5B;
color: #FFF;
}
Чтобы определить скорость эффекта наведения, используйте transition-duration
свойства.
Отключенные кнопки
Чтобы отключить кнопку, используйте свойство cursor:
button {
cursor: not-allowed;
}
Дополнительная информация:
- https://www.w3schools.com/css/css3_buttons.asp
- https://www.w3schools.com/howto/howto css animate_buttons.asp