2

Как наиболее просто сделать так, чтобы верхняя тень плавно исчезала после отжатия кнопки. Не хочется создавать отдельный элемент. Можно ли это сделать через box-shadow?

Jsfiddle

.btn {
  margin: 10px;
  display: inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 0 blue;
}

.btn span {
  display: inline-block;
  color: white;
  padding: 10px 20px;
  background: #3194c6;
  border-radius: 4px;
  transition: transform .2s ease-in-out;
}

.btn:active span {
  transform: translate(0, 6px);
  box-shadow: 0 -5px 0 blue;
  transition: 0.3s;
}
<a href="#" class="btn"><span>Press this!</span></a>

1
  • Сделать тоже самое, но без тега span?
    – Air
    25 авг 2018 в 6:17

1 ответ 1

2

UPD. Варианты со ссылкой без спана внутри. Меняются box-shadow и top. (Изменение transform рассогласоывается с изменением box-shadow, и кажется, что тень под кнопкой дёргается.)

Во втором случае используем две тени, чтобы каждая менялась в том же темпе, что и top. (Если менять одну тень с 6px до -6px, то они будет меняться вдвое быстрее, и получится некрасиво.)

.btn {
  background: #3194c6;
  border-radius: 4px;
  box-shadow: 0 6px 0 0 blue;
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 10px 20px;
  position: relative;
  text-decoration: none !important;
  top: 0px;
  transition: all 0.3s ease-in-out;
}

.btn:active {
  box-shadow: 0 0 0 0 blue;
  top: 6px;
}

.btn-2 {
  box-shadow: 0 6px 0 0 blue, 0 0 0 0 blue;
}

.btn-2:active {
  box-shadow: 0 0 0 0 blue, 0 -6px 0 0 blue;
}
<a href="#" class="btn">Press this!</a>
<a href="#" class="btn btn-2">Press this!</a>

Ваш ответ

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

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