Как добавить тень к кнопке?
Для добавления тени к кнопке применяется стилевое свойство box-shadow, которое пишется в правилах для селектора button или подходящего класса кнопки.
button { box-shadow: 0 0 5px rgb(0 0 0 / 0.5); }Само свойство содержит несколько параметров, из них только первые два являются обязательными, они задают положение тени относительно кнопки (рис. 1).
Рис. 1. Параметры box-shadow
Положительные значения отбрасывают тень вправо и вниз:
box-shadow: 3px 3px;Отрицательные значения отбрасывают тень влево и вверх:
box-shadow: -3px -3px;Нулевые значения создают равномерную тень вокруг кнопки:
box-shadow: 0 0;Третий параметр задаёт степень размытия тени. Например, при значении 0 тень будет чёткой, а при значение 5px — мягкой и размытой.
box-shadow: 0 0 5px;Четвёртый параметр указывает цвет тени. Использование формата rgba() позволяет сделать тень полупрозрачной.
В примере 1 показаны варианты кнопок с разными тенями, которые получаются за счёт изменения параметров свойства box-shadow.
Пример 1. Использование box-shadow для кнопок
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { padding: 0.5rem 1rem; /* Расстояние от текста до края */ margin-right: 1rem; /* Расстояние справа от кнопки */ margin-bottom: 1rem; /* Расстояние снизу от кнопки */ border: 0; /* Убираем рамку */ } .btn-shadow-1 { box-shadow: 0 0 5px rgb(0 0 0 / 0.5); } .btn-shadow-2 { box-shadow: 3px 3px 5px rgb(0 0 0 / 0.5); } .btn-shadow-3 { box-shadow: -3px -3px 5px rgb(0 0 0 / 0.5); } .btn-shadow-4 { box-shadow: 3px 3px 0 rgb(0 0 0 / 0.8); } </style> </head> <body> <button>Обычная кнопка</button> <button class="btn-shadow-1">Кнопка с тенью</button> <button class="btn-shadow-2">Кнопка с тенью</button> <button class="btn-shadow-3">Кнопка с тенью</button> <button class="btn-shadow-4">Кнопка с тенью</button> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Кнопки с тенью
Safari не отображает тень для кнопок, для этого браузера следует добавить свойство appearance со значением none.
Автор: Влад Мержевич
Источник: webref.ru