Botón con anillos girando
Los botones sobre los que queremos que haga click un usuario deben ser llamativos. Son los botones Call To Action (literalmente llamar a la acción). Este botón va a llamar la atención por sus anillos giratorios.
Solo necesitas CSS y puedes usar un solo anillo o dos, a tu gusto.
El código HTML
El código html de este ejemplo es sumamente simple tan solo un bloque div con otro para un texto o caption del botón. Este segundo bloque es opcionale y solo se usa a titulo informativo. El bloque con clase anillo-cont va a usarse como contenedor del bloque de clase anillos que lleva el anillo girando a su alrededor
<div class="anillo-cont">
<div class="anillo-animado">
<span>
Pulsa aquí
</span>
</div>
</div>
El código CSS
Este es el verdadero núcleo del efecto. Se base en el uso de pseudo elementos before y after. Si usas un solo anillo basta con after o before.
Este efecto se basa en el uso de animaciones, cajas redondeadas y pseudo selectores ::after o ::before (uno para cada anillo).
El anillo es un bloque div, con borde y con esquinas redondeadas al 50% para formar un cículo. Ademas se le define un clip-path con un polígono tipo tirángulo que marca un sector del bloque y oculta el resto del borde.
La animación se limita a hacer girar el bloque desde 0 a 359 grados, una vuelta completa.
Al usarse posicionamientos absolutos, se debe usar un contenedor con posicinamioetno relativo. Dentro está el conjunto bloque y anillos que lo rodean.
:root{
--radio : 100px;
}
.anillo-cont {
height: 200px;
width: 100%;
position: relative;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.anillo-animado,
.anillo-animado::before,
.anillo-animado::after{
border-radius:50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.anillo-animado {
background: red;
color: white; /*color lineas*/
display:flex; /*para centrar el texto*/
justify-content:center;
align-items:center;
text-align:center;
width: var(--radio);
height: var(--radio);
margin: auto; /*situar en el centro de su conenedor*/
padding: 4px;
}
/* Anillo: box before y after rounded 50% */
/* Se usa clip-path para formar el sector circular */
.anillo-animado::before,
.anillo-animado::after {
content: "";
z-index: -1;
margin: -10px; /*separación entre lineas y caja*/
border: 2px solid black; /*grosor y color de la linea animada*/
animation: girar-anillo 10s linear infinite; /*Opciones de la animación*/
clip-path:polygon(50% 50%, 70% 100%, 0% 100%); /*Sector de anillo*/
background:white;
}
/*Delay para que no se muevan al mismo tiempo: 1/2 de la duración total*/
.anillo-animado::before {
animation-delay: -5s;
}
@keyframes girar-anillo {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Así de sencillo. Al usar dos anillos es necesario colocar un delay en uno de ellos para que no giren juntos. Si pones distintas velociades y distancias este delay no es imprescindible.
Te animo a experimentar opciones como colores de fondo, velocidades, colores... ¡Es la mejor forma de aprender!