Как добавить тень к кнопке?
Для добавления тени к кнопке применяется стилевое свойство box-shadow, которое пишется в правилах для селектора button или подходящего класса кнопки.
button { box-shadow: 0 0 5px rgba(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; /* Расстояние слева от кнопки */ } .btn-shadow-1 { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .btn-shadow-2 { box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); } .btn-shadow-3 { box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.5); } .btn-shadow-4 { box-shadow: 3px 3px 0 rgba(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>
Автор: Влад Мержевич
Источник: webref.ru