» » » Кнопка с анимацией по ховеру и автоматическая
13 0  

Кнопка с анимацией по ховеру и автоматическая

Анимация кнопки с движением линей по кругу при навидение (hover) и с помощью анимации для постояного проигривания

Анимация создана с использованим движения псевдоелементов. Минимум кода.

lol Если нужна анимация ТОЛЬКО при ховере то раскоментировать код - 01 и удалить код - 02

Исполняемый код:

<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>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019