Кнопка переключения границы анимации перехода - PullRequest
Новая
       62

Кнопка переключения границы анимации перехода

0 голосов
/ 05 апреля 2020

Я хочу достичь такого же эффекта, как и на этой странице, когда вы наводите курсор на ссылку Facebook. https://www.clubtrinity.cz/ При наведении курсора я хочу повернуть границы текущего состояния на 180 градусов, чтобы после завершения анимации кнопка выглядела так же, как и при наведении курсора (я хочу, чтобы зазор слева и справа был виден после анимация наведения запускается, пока вы поддерживаете наведение.) Теперь у меня есть это, неправильное время, но я не знаю, как заставить левую и правую сторону смотреть после анимации наведения, как и до наведения. Может кто-нибудь помочь мне, пожалуйста?

PS: Под кнопкой будет какое-то фоновое изображение 

.btn.btn-primary .btn-primary-edge-1,.btn.btn-primary .btn-primary-edge-2,.btn.btn-primary .btn-primary-edge-3,.btn.btn-primary .btn-primary-edge-4 {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
}
.btn.btn-primary .btn-primary-edge-1:before {
    content: "";
    display: block;
    height: 2px;
    transition: left 250ms linear 200ms, right 250ms linear 250ms;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #afafaf;
}
.btn.btn-primary .btn-primary-edge-1:after {
    content: "";
    display: block;
    height: 2px;
    transition: right 250ms linear 150ms, left 250ms linear 250ms;
    position: absolute;
    top: 0;
    right: 100%;
    left: 0;
    background: #afafaf;
}
.btn.btn-primary:hover .btn-primary-edge-1:before {
    left: 100%;
    right: 0;
    transition: right 0ms linear 0ms, left 250ms linear 200ms;
}
.btn.btn-primary:hover .btn-primary-edge-1:after {
    left: 0;
    right: 0%;
    transition: right 250ms linear 250ms, left 0ms linear;
}
.btn.btn-primary .btn-primary-edge-2:before {
    content: "";
    display: block;
    height: 2px;
    transition: right 250ms linear 200ms, left 250ms linear 250ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #afafaf;
}
.btn.btn-primary .btn-primary-edge-2:after {
    content: "";
    display: block;
    height: 2px;
   	transition: left 250ms linear 150ms, right 250ms linear 250ms;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 100%;
    background: #afafaf;
}
.btn.btn-primary:hover .btn-primary-edge-2:before {
    left: 0%;
    right: 100%;
    transition: left 0ms linear 0ms, right 250ms linear 200ms;
}
.btn.btn-primary:hover .btn-primary-edge-2:after {
    left: 0;
    right: 0%;
    transition: left 250ms linear 250ms, right 0ms linear 250ms;
}
.btn.btn-primary .btn-primary-edge-3:before {
    content: "";
    display: block;
    width: 2px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 70%;
    background: #afafaf;
    -webkit-transition: bottom 150ms linear 0ms;
    transition: bottom 150ms linear 0ms;
}


.btn.btn-primary .btn-primary-edge-3:after {
    content: "";
    display: block;
    width: 2px;
    position: absolute;
    top: 70%;
    right: 0;
    bottom: 0;
    background: #afafaf;
    -webkit-transition: top 150ms linear 0ms;
    transition: top 150ms linear 0ms;
}


.btn.btn-primary:hover .btn-primary-edge-3:before {
    -webkit-transition: bottom 150ms linear 150ms;
    transition: bottom 150ms linear 150ms;
    bottom: 0%;
}
.btn.btn-primary:hover .btn-primary-edge-3:after {
    -webkit-transition: top 150ms linear 150ms;
    transition: top 150ms linear 150ms, bottom 150ms linear 300ms;
    top: 100%;
    bottom: 200%;
}
.btn.btn-primary .btn-primary-edge-4:before {
    content: "";
    display: block;
    width: 2px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 70%;
    background: #afafaf;
    -webkit-transition: bottom 150ms linear 0ms;
    transition: bottom 150ms linear 0ms;
}


.btn.btn-primary .btn-primary-edge-4:after {
    content: "";
    display: block;
    width: 2px;
    position: absolute;
    top: 70%;
    left: 0;
    bottom: 0;
    background: #afafaf;
    -webkit-transition: top 150ms linear 0ms;
    transition: top 150ms linear 0ms;
}


.btn.btn-primary:hover .btn-primary-edge-4:before {
    -webkit-transition: bottom 150ms linear 150ms;
    transition: bottom 150ms linear 150ms;
    bottom: 100%;
}
.btn.btn-primary:hover .btn-primary-edge-4:after {
    -webkit-transition: top 150ms linear 150ms;
    transition: top 150ms linear 150ms;
    top: 0%;
}
.btn.btn-primary span {
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.2em;
    font-weight: 300;
}
.btn-primary {
    display: inline-block;
    color: black;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0.2em;
    font-weight: 300;
    padding: 10px 30px;
    position: relative;
    text-transform: uppercase;
    background-color: transparent;
    font-family: 'Conv_BebasNeue Bold';
    border-color: transparent;
    text-align: center;
	transition 0.6s all;
	font-weight: 500;
	line-height: 1em;
	&:hover,&:focus,&:active {
		text-decoration: none;
		background-color: transparent;
		border-color: transparent;
		outline: none;
	}
}
a {
text-decoration: none;
}
<a href="#" aria-label="Naše služby" class="btn btn-primary">
  <span class="btn-primary-edge-1"></span>
  <span class="btn-primary-edge-2"></span>
  <span class="btn-primary-edge-3"></span>
  <span class="btn-primary-edge-4"></span> Naše služby
</a>
...