Задать вопрос
VadimOswald

Вадим Освальд

Ответы пользователя по тегу CSS

  • Как сверстать данный блок?

    VadimOswald
    @VadimOswald 
    <div class="card">
  <img src="здесь ссылка на твое изображение" alt="Male" class="image" />
  <button class="button">
    Male
    <div class="circle">
      <span class="arrow">&gt;</span>
    </div>
  </button>
</div>


    .button {
  position: absolute;
  bottom: 30px; 
  left: 50%;
  transform: translateX(-50%);
  width: 300px; /
  height: 60px; 
  background-color: #ff6f61;
  color: white;
  border: none;
  border-radius: 30px; 
  font-size: 16px; 
  font-weight: bold; 
  cursor: pointer; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 20px; 
}

.button:hover {
  background-color: #e65a4f; 
}

.button .circle {
  width: 40px; 
  height: 40px; 
  background-color: white;
  border-radius: 50%; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.button .circle .arrow {
  color: #ff6f61;
  font-size: 18px; 
  font-weight: bold; 
}


    Поменяй значения в стилях на нужные, должно работать
    Ответ написан
    1 комментарий
    1 комментарий

  • Взаимодействие с другими классами и блоками можно ли так?

    VadimOswald
    @VadimOswald
    Можешь попробовать работать с селектором :has(), но он может не работать на старых браузерах.
    Простой пример:
    <div class="container">
    <div class="trigger">Наведи на меня</div>
    <div class="target">Я изменюсь</div>
</div>


    .trigger {
    padding: 10px;
    background-color: lightblue;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.target {
    padding: 10px;
    background-color: lightcoral;
    transition: background-color 0.3s ease;
}

.container:has(.trigger:hover) .target {
    background-color: lightgreen;
}


    Селектор :has() проверяет, есть ли внутри родительского элемента container активный элемент с классом .trigger, на который наведен курсор. Когда блок trigger находится в состоянии hover, :has() находит это состояние в родительском контейнере, в контейнере срабатывает правило: стиль для target меняется на background-color: lightgreen.
    Еще можно юзать JS
    Ответ написан
    Комментировать
    Комментировать