El botón inestable es un tipo de efecto de botón que se introdujo en la última década. Es uno de los efectos menos utilizados que usamos para diseñar un botón. Esto se puede usar siempre que un botón actúe como un botón de repetición.
Enfoque: el enfoque para crear esta animación es el uso de la función skewX() con fotogramas clave para animar el ángulo de inclinación en cada fotograma.
Sección HTML: en esta sección, se define la estructura básica de la página HTML y se crea un nuevo botón que luego se diseñaría con CSS.
Código:
HTML
<!DOCTYPE html> <html> <head> <title>Shaky Button</title> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> Creating a shaky button using HTML and CSS </b> <p style="margin: 25px;"> <!-- Create the shaky button --> <button class="shaky-btn"> GeeksforGeeks </button> </p> </body> </html>
Sección CSS: en esta sección, diseñaremos el botón y le aplicaremos animaciones para obtener el efecto deseado. Se deben seguir los pasos que se indican a continuación:
- Paso 1: Cree una nueva clase que se usará para diseñar el botón. Aplique un estilo básico a esta clase de botón, como margen, relleno y algún borde para espaciar y colocar el botón.
- Paso 2: Use la función skewX() para inclinar el botón a un ángulo particular en el eje x. El ángulo debe ser un valor negativo por primera vez.
- Paso 3: use el selector de desplazamiento para aplicar la animación y los efectos cuando se desplaza el botón.
- Paso 4: use fotogramas clave para crear la animación usando la función de sesgo. El orden de los ángulos debe alternarse entre el ángulo negativo original y su valor positivo. Un cuadro podría dividirse en varios cuadros especificando cuántas veces se agitaría el botón.
Sugerencia: El uso del selector :before es completamente opcional, uno puede diseñar el botón con un efecto diferente, sin embargo, debe asegurarse de que los valores de ángulo se usen alternativamente, uno positivo y otro negativo.
Código:
CSS
<style>
/* Style the button */
.shaky-btn {
width: 200px;
height: 50px;
background: white;
font-size: 24px;
transform: skewX(-10deg);
cursor: pointer
}
/* Specify the effect when the
button is hovered over */
.shaky-btn:hover {
animation: shake 0.4s ease-out;
border: 2px solid green;
color: green;
}
/* Use the keyframes for defining
the animation */
@keyframes shake {
0% {
transform: skewX(-10deg);
}
25% {
transform: skewX(10deg);
}
50% {
transform: skewX(-10deg);
}
75% {
transform: skewX(10deg);
}
100% {
transform: skewX(-10deg);
}
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shaky Button</title>
<style>
/* Style the button */
.shaky-btn {
width: 200px;
height: 50px;
background: white;
font-size: 24px;
transform: skewX(-10deg);
cursor: pointer;
}
/* Specify the effect when the
button is hovered over */
.shaky-btn:hover {
animation: shake 0.4s ease-out;
border: 2px solid green;
color: green;
}
/* Use the keyframes for defining
the animation */
@keyframes shake {
0% {
transform: skewX(-10deg);
}
25% {
transform: skewX(10deg);
}
50% {
transform: skewX(-10deg);
}
75% {
transform: skewX(10deg);
}
100% {
transform: skewX(-10deg);
}
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>Creating a shaky button using
HTML and CSS</b>
<p style="margin: 25px;">
<!-- Create the shaky button -->
<button class="shaky-btn">
GeeksforGeeks
</button>
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA