Efecto anillo para botón
Una manera de llamar la atención de los usuarios para que ven o pulsen un botón son las animaciones. Si se combinan con colores llamativos o muy contrastado el efecto es aún mayor.
O si lo prefieres un sencillo loader animado para mostrar mientras tu página espera algún suceso: carga de imágenes, llamadas remotas, procesamiento de formularios....
En esta ocasión vamos a construir un botón circular con un borde partido en dos que va girando, como un anillo que rodea al botón
Estos efectos son interesantes para los botones CTA (Call To Action), botones que queremos que sean pulsados por los usuarios para registrase o para ampliar información o para entrar en un sitio o sección....
Vamos a crear este efecto solo con algunos elementos CSS y HTML de una forma muy simple.
Click Aquí
Click Aquí
El código HTML
El efecto se basa en la superposición de capas:
- una base que actúa a modo de contenedor, nos da la forma y el fondo
- segunda capa con el bloque que gira y crea el efecto animado
- tercera capa concéntrica a la primera que actúa a modo de máscara sobre la anterior
- Una última capa superpuesta a todas las anteriores con el texto
Pero estas capas solo dos se crean mediante un bloque HTML, la segunda y tercera se crean con pseudoclases ::after y ::before
Así que el código HTML se ve así de simple
<div class="botonAnillo">
<h2>Click aquí</h2>
Este es todo el código HTML necesario para este elemento.
El código CSS
Todo el efecto recae sobre los estilos CSS y los pseudo elementos before y after. Uno crea el movimiento (::before) mientras el otro enmascara una parte para que solo se ves como el borde del que gira.
Esta forma permite adaptar el efecto a circulos y rectángulos. Realmente hay un rectángulo girando que al ser enmascarado solo muestra como una parte de los lados
La animación se limita a hacer girar el bloque :before desde 0 a 359 grados, una vuelta completa.
:root{
--ladoX: 100px;
--ladoY: 100px;
--esquina: 50%;
}
@keyframes ring{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.botonAnillo {
width: var(--ladoX);
height: var(--ladoY);
background: #07182E;
position: relative;
display: flex;
place-content: center;
place-items: center;
overflow: hidden;
border-radius: var(--esquina);
h2 {
z-index: 1;
color: white;
font-size: 1em;
}
/*para el borde giratorio*/
&::before {
content: '';
position: absolute;
width: 40%;
background: white;
height: 130%;
animation: ring 3s linear infinite;
}
&::after {
content: '';
position: absolute;
background: black;
inset: 5px;
border-radius: var(--esquina);
}
}
Así de sencillo es lograr este borde giratorio.
He puesto variables para que compruebes de forma sencilla como se puede cambiar de un botón circular a otro rectangular. Basta camiar los valores de ladoX, ladoY y esquinas. Con los valores actuales tienes un botón circular, si cambias el valor de esquina a por ejemplo 20px verás que el botón se transforma en un cuadrado con el mismo efecto de borde animado.