Botón con anillos girando
Los botones sobre los que queremos que el usuario haga click con el ratón deben llamar la atención destacar de alguna manera sobre el rsto de la página
Podemos destacarlos con colores detacados y un fuerte contraste entre texcto y fondo. O con efectos de animación que atraigan la atención.
A estos botones se les suele llamar CTA: Call To Action (literalmente llamar a la acción). En este ajemplo el 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!