Что не так при наведении не появляется бордер?

Question

[Yaroslav723]

<header>
    <div class="container">
        <div class="header">
            <div class="header__logo">
                <a href="#">
                    <img src="./img/Logo.png" alt="Logo">
                </a>
            </div>
            <a href="" class="header__enter">Вход</a>
            <button class="btn__reg header__btn gradient-box">Регистрация</button>
            <div class="header__lang"> RU</div>
        </div>
        
    </div>

</header>

.btn__reg{
    
    border-radius: 40px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: $main-color;
    padding: 19px 34px;
    background-color:transparent;
    border: 1px solid #fff;
}


  .gradient-box:hover {
    max-width: 256px;
    position: relative;
    padding: 19px 34px;
   
    $border: 1px;
    color: #ffff;
    background:transparent;
    background-clip: padding-box; /* !importanté */
    border: solid $border transparent ; /* !importanté */
    border-radius: 40px;
  
    &:before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      margin: -$border; /* !importanté */
      border-radius: inherit; /* !importanté */
      background: linear-gradient(to right, #FF3471, #710BA0);
    }
  }

Comments

[Kentavr16]

Html тоже поможет

[Yaroslav723]

Kentavr16, прикрепил

[Kentavr16]

Yaroslav723, попробуй
border :solid 1px transparent;

В классе с ховером.

[Yaroslav723]

Kentavr16, не работает

Answer 1

[anon67111]

думаю ты уже и сам за 9 часов заметил, но всё же, ты не указал solid(цвет) для border который в gradient-box:hover