0

.btn-slider {
  font-family: inherit;
  border: none;
  outline: none;
  background-color: #fb565a;
  height: 50px;
  width: 240px;
  border-radius: 5px;
  font-size: 16px;
  color: white;
}

.btn-slider:hover {
  background-color: #e74246;
}

.btn-slider:active {
  background-color: #d7373b;
  color: #e16c6f;
}
<form action="#">
  <button value="Заказать" class="service-btn1">Заказать</button>
</form>

Прикладываю изображение, как должна выглядеть тень

введите сюда описание изображения

3
  • какого рода тень? вверху внутри? снаружи? что именно вы пробовали, что не получилось?
    – kizoso
    8 янв 2020 в 13:38
  • ниже комментарий, со скриншотом кнопки
    – fyntyaa
    8 янв 2020 в 13:43
  • 1
    можете использовать генератор cssmatic.com/box-shadow 8 янв 2020 в 14:13

2 ответа 2

1

Можете попробовать два варианта, с тенью:

button{
	  border-radius: 10px;
	  border: none;
	  padding: 10px 10px 14px 10px;
	  color: #111;
	  border-radius: 10px;
	  font-size: 1.2em;
	  font-weight: 200;
	  transition: all 0.2s;
	  margin: 5px;
	  border-bottom: 0px solid #eee;
	  cursor:pointer;
	}

	/* shadow */
	button {
	  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18) inset;
	}

	button.red{
	  background: #F7977A;
	}
<button class='red'>Посмотреть</button>

и с бордером:

button{
	  border-radius: 10px;
	  border: none;
	  padding: 10px;
	  color: #111;
	  border-radius: 10px;
	  font-size: 1.2em;
	  font-weight: 200;
	  transition: all 0.2s;
	  margin: 5px;
	  border-bottom: 0px solid #eee;
	  cursor:pointer;
	}


	button.red{
	  background: #F7977A;
	}
	/* бордер */
	button.red{
	  border-top: 4px solid #D7775A;
	}
<button class='red'>Посмотреть</button>

1

Решение без применения 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>

1
  • 1
    разрабы CSS: Мы сделаем возможность давать элементам тень. Wisser Tg в 2020году: Решение без применения box-shadow..
    – De.Minov
    8 янв 2020 в 21:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.