La animación hace que la experiencia del usuario sea más hermosa e impresionante. Con el uso de elementos HTML (Lenguaje de marcado de hipertexto) y SASS (Hoja de estilo sintácticamente impresionante), diseñaremos botones que les proporcionen un borde colorido y un efecto de animación. Usaremos Sass porque actúa como un mejor sustituto de CSS y un superconjunto de CSS. Sass brinda 100% de compatibilidad con todos los navegadores y brinda una mejor sintaxis con un archivo CSS compilado. Sass proporciona dos extensiones de archivo ‘ SCSS ‘ (Sassy Css) y ‘ SASS ‘ (sintaxis sangrada). Usaremos la extensión SCSS y varias características de SCSS .
Enfoque: Introduciremos el elemento botón y daremos la estructura de la página HTML. Usaremos las funciones de Sass para proporcionarles estilo, diseño de bordes con degradado lineal y un efecto de animación.
Implementación paso a paso:
Paso 1: Comenzaremos creando un archivo HTML . Dentro de la etiqueta de encabezado HTML, incluiremos los metaenlaces y los archivos externos para incluir fuentes alternativas. Dentro de la etiqueta del cuerpo, incluiremos atributos, clases e ID para proporcionarles diseños y etiquetas de botón para que se pueda hacer clic.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <link href= "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="border_btn1 border_btn1_animate"> <button class="container_button1 btn1-hover btn1-hover-animate"> Button 1 </button> </div> <div class="border_btn2 border_btn2_animate"> <button class="container_button2 btn2-hover btn2-hover-animate"> Button 2 </button> </div> </div> </body> </html>
Paso 2: Crearemos un archivo SCSS con una extensión de archivo .scss . Incluiremos varias características de SCSS . Las variables que comienzan con un signo de dólar ‘$’ y terminan con un punto y coma actúan como una mejor herramienta para cambiar las propiedades en un solo lugar en lugar de buscar en todo el código. El anidamiento incluye la clase principal y también usaremos extender un elemento que ayuda a heredar las propiedades de un elemento.
Código SCSS:
index.scss
/* Declaring variables */
$range: 88vh;
$background_color: #f3f3f3;
$text-color: black;
/* Declaring a mixin function by
passing a actual argument */
@mixin center($align) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $align;
}
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: inherit;
}
.container {
/* Calling a mixin function name center
by passing row as a information to
it's actual argument */
@include center(row);
/* Accessing variable using a '$' dollar sign */
height: $range;
button {
border: none;
@include center(row);
box-sizing: border-box;
cursor: pointer;
font-size: 21px;
font-weight: bold;
letter-spacing: 2px;
width: 200px;
height: 46px;
background-color: $background_color;
color: $text-color;
font-family: "Cormorant", "Garamond";
margin-left: 23px;
border-radius: 24px;
}
.border_btn1 {
width: 200px;
height: 44px;
padding: 3px;
border-radius: 41px;
margin-left: 21px;
}
.border_btn1_animate {
background: linear-gradient(
to left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
#{&}_button1 {
margin-left: 0px;
height: 44px;
display: inline-block;
position: relative;
}
.border_btn2 {
width: 200px;
height: 44px;
padding: 3px;
border-radius: 41px;
margin-left: 21px;
}
.border_btn2_animate {
background: linear-gradient(
to right,
chartreuse,
#6161fd,
#fd31fd,
#ffb03a,
red
);
}
#{&}_button2 {
/* Inheriting the properties
of container_button1 */
@extend .container_button1;
}
}
.btn1-hover:hover:before,
.btn2-hover:hover:before {
position: absolute;
left: 0px;
top: 0px;
line-height: 2.1;
min-width: 49px;
font-size: 100%;
border-radius: 24px;
background: rgba(0, 0, 0, 0.1);
}
.btn1-hover:hover:before,
.btn2-hover:hover:before {
content: url("");
}
.btn1-hover-animate:hover:before,
.btn2-hover-animate:hover:before {
transition: width 0.5ms ease-in-out;
animation: change 1s forwards 1;
}
@keyframes change {
0% {
width: 1px;
}
100% {
width: 200px;
}
}
Paso 3: CSS u hojas de estilo en cascada se compilan con SCSS . Lo mejor de SCSS es que proporciona el CSS compilado con soporte de navegador, lo que lo hace compatible con los principales navegadores.
Utilizamos el diseño de cuadro flexible de CSS para hacer que los botones aparecieran centrados, con un degradado lineal para proporcionar el borde del botón con el toque de degradado seguido de la dirección ‘a la izquierda’ que indica que comienza el color. La animación y los fotogramas clave se utilizan para mostrar los efectos cuando el cursor está sobre el botón, se agregaron propiedades abreviadas de animación ‘ animación: cambiar 1s adelante 1 ‘ seguido de nombre de animación – cambio, función de retraso de animación: 1s, modo de relleno de animación : adelante (para detener la animación después del último fotograma clave) animation-iteration-count-function: 1 .
Al pasar el cursor sobre la opacidad del color de fondo de los botones, aumentará ligeramente el ancho de 1 px a 200 px, según el ancho del botón que se logra mediante el uso de fotogramas clave de CSS. No está permitido realizar ningún cambio en el archivo CSS, ya que compilará automáticamente el archivo SASS o SCSS en CSS.
Código CSS compilado:
index.css
/* Declaring variables */
/* Declaring a mixin function by passing a actual argument */
*,
*::before,
*::after {
padding: 0px;
margin: 0px;
box-sizing: inherit;
}
.container {
/* Calling a mixin function name center by
passing row as a information
to it's actual argument */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
/* Accessing variable using a '$' dollar sign */
height: 88vh;
}
.container button {
border: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
box-sizing: border-box;
cursor: pointer;
font-size: 21px;
font-weight: bold;
letter-spacing: 2px;
width: 200px;
height: 46px;
background-color: #f3f3f3;
color: black;
font-family: "Cormorant", "Garamond";
margin-left: 23px;
border-radius: 24px;
}
.container .border_btn1 {
width: 200px;
height: 44px;
padding: 3px;
border-radius: 41px;
margin-left: 21px;
}
.container .border_btn1_animate {
background: linear-gradient(
to left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
.container .container_button1,
.container .container_button2 {
margin-left: 0px;
height: 44px;
display: inline-block;
position: relative;
}
.container .border_btn2 {
width: 200px;
height: 44px;
padding: 3px;
border-radius: 41px;
margin-left: 21px;
}
.container .border_btn2_animate {
background: linear-gradient(
to right,
chartreuse,
#6161fd,
#fd31fd,
#ffb03a,
red
);
}
.container .container_button2 {
/* Inheriting the properties of container_button1 */
}
.btn1-hover:hover:before,
.btn2-hover:hover:before {
position: absolute;
left: 0px;
top: 0px;
line-height: 2.1;
min-width: 49px;
font-size: 100%;
border-radius: 24px;
background: rgba(0, 0, 0, 0.1);
}
.btn1-hover:hover:before,
.btn2-hover:hover:before {
content: url("");
}
.btn1-hover-animate:hover:before,
.btn2-hover-animate:hover:before {
transition: width 0.5ms ease-in-out;
animation: change 1s forwards 1;
}
@keyframes change {
0% {
width: 1px;
}
100% {
width: 200px;
}
}
Producción:
