Как сделать круг под кнопкой при наведении и оставить этот круг, когда та активна?

Question

Пытаюсь сделать так, чтоб при наведении на кнопку, под ней появлялся небольшой круг, а на той кнопке которая активна, этот кружок оставался, выглядит это так:

Есть ли вообще возможность сделать это исключительно через css и html или придётся прибегнуть к JS?

Пытался уже и рисовать и картинкой вставлять, но увы ничего не вышло, код выглядит так:

HTML:

.header-mid {
  display: flex;
  align-items: center;
  margin-left: 283px;
}

.header-mid a {
  color: white;
  opacity: 50%;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 15px;
  padding-left: 12.5px;
  padding-right: 12.5px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-mid a:hover {
  color: #C681FF;
  opacity: 50%;
  border-radius: 10px;
  transition: 0.2s;

}

.header-mid .active {
  color: #C681FF;
  opacity: 100%;
}

<div class="header-mid">
  <button><a class="active" href="#">Режимы</a></button>
  <button><a href="#">Купить R$</a></button>
  <button> <a href="#">Бесплатная рулетка</a></button>
  <button><a href="#">Мои промокоды</a></button>
</div>

На форуме уже есть подобный вопрос, но человек делал данные кнопки списком, а у меня как видите ситуация немного другая.

Answer 1

Как сделать круг под кнопкой при наведении и оставить этот круг, когда та активна?

Можно использовать псевдо элемент...

На форуме уже есть подобный вопрос, но человек делал данные кнопки списком, а у меня как видите ситуация немного другая

Наверняка никакой разницы там нет. :)

.header-mid {
  display: flex;
  align-items: center;
  margin-left: 283px;
}

.header-mid a {
  color: white;
  opacity: 50%;
  font-family: 'SF pro display';
  font-weight: medium;
  font-size: 15px;
  padding-left: 12.5px;
  padding-right: 12.5px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.header-mid a:hover {
  color: #C681FF;
  opacity: 50%;
  border-radius: 10px;
  transition: 0.2s;
}
.header-mid .active {
  color: #C681FF;
  opacity: 100%;
}
button {
  position: relative;
  &:has(.active), :hover {
    &:after {
      content: '';
      position: absolute;
      top:  calc(100% + 5px);
      left: calc(50% - 5px);
      display: block;
      width: 10px;
      height: 10px;
      background-color: #C681FF;
      border-radius: 50%;
    }
  }
}

<div class="header-mid">
  <button><a class="active" href="#">Режимы</a></button>
  <button><a href="#">Купить R$</a></button>
  <button> <a href="#">Бесплатная рулетка</a></button>
  <button><a href="#">Мои промокоды</a></button>
</div>

БЛОГ НА HUSL

Как сделать круг под кнопкой при наведении и оставить этот круг, когда та активна?

Ответы (1 шт):