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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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