508 0
Кнопка с анимацией по ховеру и автоматическая
Анимация кнопки с движением линей по кругу при навидение (hover) и с помощью анимации для постояного проигривания
Анимация создана с использованим движения псевдоелементов. Минимум кода.
Если нужна анимация ТОЛЬКО при ховере то раскоментировать код - 01 и удалить код - 02
Виконуваний код:
<![CDATA[<div class="korobka">
<a class="knopka" href=""><s>Название кнопки</s></a>
</div>
<style>
s, a {text-decoration:none;font-style:normal;}
/* каркас для кнопки */
.korobka {width:100%; padding:50px; }
/* Стили самой кнопки */
.knopka {display:block; overflow:hidden; position:relative; text-transform:uppercase; border-radius:4px; text-align:center; width:200px; padding:10px 20px; color:#127783;}
.knopka s::after, .knopka s::before {content:'';height:100%; width:2px; background: linear-gradient(360deg,transparent,#127783); position:absolute; bottom:-100%;left:0; }
.knopka s::before {left:auto;right:0; bottom:auto; top:-100%;background: linear-gradient(180deg,transparent,#127783);}
.knopka::after, .knopka::before {content:'';width:100%; height:2px; background: linear-gradient(90deg,transparent,#127783);position:absolute; top:0; left:-100%; }
.knopka::before {top:auto; bottom:0; left:auto; right:-100%; background: linear-gradient(270deg,transparent,#127783);}
.knopka:hover {background:#127783; color:#fff;transition:.8s;}
/* - -! код 01 Только анимация при ховере
.knopka:hover::after{transition:1s;left:0;}
.knopka:hover s::after{transition:1s;transition-delay: 0.9s; bottom:0;}
.knopka:hover::before{transition:1s;transition-delay: 0.6s; right:0;}
.knopka:hover s::before{transition:1s;transition-delay: 0.3s;top:0;}
*/
/* -! код 02 удалить все ниже если не нужна постояная анимация !- */
.knopka::after{left:0; animation: knpanm-v1 2s linear infinite;}
.knopka s::before{top:0; animation: knpanm-v2 2s linear infinite;}
.knopka::before{right:0; animation: knpanm-v3 2s linear infinite;}
.knopka s::after{bottom:0; animation: knpanm-v4 2s linear infinite;}
@keyframes knpanm-v1 {
0% {left:-100%;}
30% {left:0;}
100% {left:0;}
}
@keyframes knpanm-v2 {
0% { top:-100%; }
30% { top:-100%; }
60% {top:0;}
100% {top:0;}
}
@keyframes knpanm-v3 {
0% {right:-100%; }
60% {right:-100%; }
90% {right:0;}
100% {right:0;}
}
@keyframes knpanm-v4 {
0% {bottom:-100%; }
90% {bottom:-100%; }
100% {bottom:0;}
}
</style>]]>