Как добавить тень к кнопке?

Для добавления тени к кнопке применяется стилевое свойство box-shadow, которое пишется в правилах для селектора button или подходящего класса кнопки.

button {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

Само свойство содержит несколько параметров, из них только первые два являются обязательными, они задают положение тени относительно кнопки (рис. 1).

Параметры box-shadow

Рис. 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>