How to expand button with animation on hover using Vue.js ?
Last Updated :
18 Aug, 2020
Improve
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:
<!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.
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:
Vue.js app for hovering zoom: Created a new vue.js app which will animate zoom in to the button class.
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:
