Нужно сверстать такую кнопку
Вот ссылка на пример похожей кнопки и анимации ее границы https://rezart.agency/portfolio/artistream.ru/
Не выходит реализовать такую же анимацию, вот все что смог придумать
.button {
position: relative;
display: block;
background: none;
border: none;
border-top: 1px solid #CC1414;
border-bottom: 1px solid #CC1414;
padding: 11px 25px;
color: #FFF;
font-family: "CenturyGothic";
font-size: 14px;
line-height: 16px;
-webkit-transition: all .6s ease;
transition: all .6s ease
}
.button:before {
position: absolute;
content: "";
display: block;
height: 20px;
width: 1px;
background: #CC1414;
left: 0;
bottom: 0
}
.button:after {
position: absolute;
content: "";
display: block;
height: 20px;
width: 1px;
background: #CC1414;
right: 0;
top: 0
}
.button:hover {
cursor: pointer;
text-decoration: none
}
.button:hover:before {
bottom: 18px
}
.button:hover:after {
top: 18px
}
Вернуться на гланую
Ответ
Кнопка в задаче выглядит несколько проще, чем в референсе, её можно в принципе и без svg сделать.
.button {
position: relative;
padding: 12px 36px;
border-width: 1px 0;
border-style: solid;
border-color: #cc1414;
background-color: transparent;
margin: 0;
outline: none;
cursor: pointer;
overflow: hidden;
}
.button::before,
.button::after {
content: '';
position: absolute;
width: 1px;
height: 150%;
background: linear-gradient(-180deg, #cc1414 33.3%, rgba(0,0,0,0) 33.3%, rgba(0,0,0,0) 66.6%, #cc1414 66.6%);
transition: transform .1s ease-out;
}
.button::before {
left: 0;
top: -50%;
}
.button::after {
right: 0;
top: 0;
}
.button:hover::before {
transform: translateY(33.33%);
}
.button:hover::after {
transform: translateY(-33.33%);
}
Комментариев нет:
Отправить комментарий