En este artículo, crearemos un botón simple usando HTML y CSS. Después de eso, agregaremos un código vue.js para hacer un botón animado al pasar el mouse.
Para hacer la animación del botón, primero creamos un botón. Sobre el que vamos a aplicar hovering.
Código del botón HTML:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="app"> <h1>GeeksForGeeks Button Animation</h1> <hr> <button :class="classes" @mouseover="hoverOver" @mouseout="hoverOut"> This is Button </button> </div> </body> </html>
Producción:
Para hacer el botón más atractivo, usamos algunas propiedades CSS.
CSS
body {
background: #20262E;
padding: 100px;
font-family: Helvetica;
}
#app {
background: rgb(36, 196, 30);
border-radius: 10px;
padding: 100px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
button {
background-color: #9fb89f; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Salida después de aplicar las propiedades CSS:
Después de CSS
Aplicación Vue.js para el zoom flotante: se creó una nueva aplicación vue.js que animará el acercamiento a la clase de botón.
Javascript
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function() {
console.log('over');
this.classes = ['animated', 'zoomIn']
},
hoverOut: function() {
console.log('out');
this.classes = []
},
hoverOutTimeout: function() {
setTimeout(() => {
console.log('out');
this.classes = []
}, 1000);
},
}
})
Después de agregar la aplicación y ejecutar el código de vue.js a través del Node js, obtenemos el efecto de zoom (expandir) en el botón después de pasar el mouse sobre él.
Producción:
Justo después de flotar
En expansión
