In this article, we will create a simple button using HTML and CSS. After that we will add some vue.js code to make animated button on mouse hover.
For making the button animation first we create a button. On which we are going to apply hovering.
HTML Button Code:
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> |
Output:
To make the button more attractive, we use some CSS properties.
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; } |
Output after applying CSS properties:
After CSS
Vue.js app for hovering zoom: Created a new vue.js app which will animate zoom in to the button class.
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); }, } }) |
After adding the app and running the code of vue.js through node js, we get zoom (expand) effect on button after hovering over it.
Output:
Just after hovering
Expanding
