Решение без применения box-shadow
, а при помощи применения дополнительного контейнера внутри кнопки, в стилях которого указан другой цвет фона, из-за чего и достигается эффект тени.
.btn-slider__inner,
.btn-slider {
overflow: hidden;
border-radius: 2px;
user-select: none;
}
.btn-slider {
display: inline-block;
background-color: #c23235;
padding-top: 4px !important;
padding: 0;
cursor: pointer;
}
.btn-slider__inner {
background-color: #d7373b;
color: #e37174;
/* Примерно как во вложении. */
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 24px;
/* Изменить размер кнопки можно здесь. */
padding: 7px 34px;
}
.btn-slider:hover,
.btn-slider:hover .btn-slider__inner {
background-color: #e74246;
}
.btn-slider:active,
.btn-slider:active .btn-slider__inner {
background-color: #d7373b;
color: #e16c6f;
}
/* Очистим стили браузера, они будут мешать. */
button.btn-slider {
outline: none;
border: none;
}
/* Firefox, к примеру, добавляет обводку кнопки внизу. */
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
<button value="Заказать" class="btn-slider">
<div class="btn-slider__inner">Заказать</div>
</button>