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 resto de la página

Podemos destacarlos con colores destacados y un fuerte contraste entre texto 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.

Otra aplicación de esta animación CSS es el tradicional loader animado para mostrar mientras tu página espera algún suceso: carga de imágenes, llamadas remotas, procesamiento de formularios....

Solo necesitas CSS y puedes usar un solo anillo o dos, a tu gusto.

Click Aquí
Click Aquí
Click Aquí

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!