0

Есть анимация, я хочу обернуть во внешний блок и при наведении на внешний блок вызывалась эта анимация, как можно это сделать?

.rectangle-button {
    border: 5px solid #FF4218;
    box-sizing: border-box;
    
    Width:155px;
    Height: 40px;
    margin-left:58px;
    margin-top:45px;
    margin-bottom:19px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 50px;
    
    display:inline-flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    color: #FFFFFF;
    
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    position: relative;
}
.rectangle-button:hover  {
    background-color: transparent;
    text-shadow: nthree;
}
.rectangle-button:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}
.rectangle-button:before{
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #FF4218;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
<div class="col-md-12 pl-0 zindex"><div class="rectangle-button">Купить</div></div>

1 ответ 1

4

Вам нужно изменить стили таким образом, чтобы особая стилизация проводилась не по псевдоклассу :hover кнопки, а по родительскому.

В примере ниже я изменил верстку, добавив один класс .example для родительского элемента, чтобы было понятно, что я имею в виду.

.rectangle-button {
  border: 5px solid #FF4218;
  box-sizing: border-box;
  Width: 155px;
  Height: 40px;
  margin-left: 58px;
  margin-top: 45px;
  margin-bottom: 19px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 50px;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
}

.example:hover .rectangle-button {
  background-color: transparent;
  text-shadow: nthree;
}

.example:hover .rectangle-button:before {
  left: 0%;
  right: auto;
  width: 100%;
}

.rectangle-button:before {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: '';
  color: #000 !important;
  background: #FF4218;
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.example {
  padding: 15px;
  border: 1px dashed #ccc;
}
<div class="col-md-12 pl-0 zindex example">
  <div class="rectangle-button">Купить</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.