Почему у кнопки пропадает box-shadow?

Question

Почему у кнопки пропадает box-shadow?

Рейтинг: 0Ответов: 1Опубликовано: 16.03.2023

У меня есть кнопка, у неё есть тени при hover, но они почему-то пропадают при адаптиве и появляются углы при hover, почему так?

.header__basic-button{
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;

    padding: 23px 46px;
    
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #D8A65D;
    box-shadow: 0px 0px 48px rgba(255, 158, 68, 0.37);
    backdrop-filter: blur(24.5px);
    border-radius: 30px;

    color: #FBDAA8;
    outline: none; 
    transition: 0.4s;
}

.header__basic-button:hover{
    cursor: pointer;
    box-shadow:0 0 10px var(--main-color), 0 0 40px var(--main-color),0 0 80px var(--main-color), 0 0 120px var(--main-color),0 0 120px var(--main-color);
}

css

Источник: Stack Overflow на русском

Answer 1

▲ 1

Не понятно о каком адаптиве идёт речь, но в остальном всё работает, как и должно:

/* For example only --> */ body{margin:0;min-height:100vh;background-color:#fff;background-image:url('https://i.sstatic.net/m9NKc.png'),radial-gradient(#fff8,#000f);background-position:0 0;background-repeat:no-repeat;background-size:auto;display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;gap:1em}

.header__basic-button {
  --main-color: #f00;
  font: normal 700 18px/23px "Lato", sans-serif;
  padding: 23px 46px;
  border: 2px solid #d8a65d;
  border-radius: 30px;
  outline: none;
  color: #fbdaa8;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 48px rgba(255, 158, 68, 0.37);
  backdrop-filter: blur(2px);
  transition: 0.4s;
}

.header__basic-button:hover {
  box-shadow:  0 0 10px var(--main-color), 0 0 40px var(--main-color), 0 0 80px var(--main-color), 0 0 120px var(--main-color), 0 0 120px var(--main-color);
  cursor: pointer;
}

<button class="header__basic-button"></button>

Почему у кнопки пропадает box-shadow?

Ответы