En este artículo, aprenderemos cómo hacer una animación de bordes emergentes para los botones de su sitio web. Para crear la animación emergente del borde, usamos CSS Pseudo Elements .
Un pseudoelemento CSS es una palabra clave agregada a un selector que le permite aplicar estilo a una parte específica del elemento seleccionado. Para crear una animación de este tipo, necesitamos crear nuestro sitio web para que se vea decente para que los clientes puedan permanecer en el sitio web.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> </head> <body> <button class="btn btn-border-pop"> Border Pop </button> </body> </html>
Código CSS: Hacemos el pseudo-elemento más grande y luego le daremos un borde y luego lo multiplicaremos * con (-2) para que haga un borde desde adentro para que tenga una buena transición de afuera hacia adentro.
El siguiente es el código para «styles.css» utilizado en el código HTML anterior. Usamos var para el color de fondo y el tamaño del borde. Podemos usar la transición en la parte superior, izquierda, derecha e inferior. Podemos calcular el tamaño del borde -2 para alejarlo de la caja.
estilos.css
CSS
*, *::before, *::after {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
}
button {
margin: 1rem;
}
.btn {
background-color: var(--background-color);
color: #222;
padding: .5em 1em;
border: none;
outline: none;
position: relative;
cursor: pointer;
--background-color: #E3E3E3;
--border-size: 2px;
--accent-color: #0AF;
}
.btn.btn-border-pop::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
border: var(--border-size) solid var(--background-color);
transition: top, left, right, bottom, 100ms ease-in-out;
}
.btn.btn-border-pop:hover::before,
.btn.btn-border-pop:focus::before {
top: calc(var(--border-size) * -2);
left: calc(var(--border-size) * -2);
right: calc(var(--border-size) * -2);
bottom: calc(var(--border-size) * -2);
}
Producción:
Publicación traducida automáticamente
Artículo escrito por vasuvijayvargiya240 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA