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.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 ; /* 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: