Блог

Итак, я пытаюсь сделать кнопку, которая при наведении на нее дает классный эффект, но если вы нажмете на нее, она немного опустится.

Проблема в том, что когда я использую:active , он не работает. (похоже, не удается исправить amp;—прозрачную часть)

Если вы не пришли из SASS, то amp; — это маршрут класса

amp;—прозрачный, amp;—прозрачный: ссылка, amp;—прозрачный: посещенный {

 background-color: transparent;
border: 2px solid $color-white;
position: relative;
transition: all 0.2s;

amp;::before {
  content: "";
  position: absolute;
  display: inline-block;
  background-color: $color-white;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  transform: scaleX(1.25) scaleY(1.8);
  transition: all 0.3s;
}

amp;:active {
  transform: translateY(2px);
}

amp;:hover {
  background-color: $color-white;
  color: $color-primary;

  amp;::before {
    transform: scaleX(1) scaleY(1);
    opacity: 1;
  }
}
 

}