How to expand button with animation on hover using Vue.js ?
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.2 s;
}
li {
margin : 8px 0 ;
}
h 2 {
font-weight : bold ;
margin-bottom : 15px ;
}
del {
color : rgba( 0 , 0 , 0 , 0.3 );
}
button {
background-color : #9fb89f ;
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
Last Updated :
18 Aug, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...