How to expand button with animation on hover using Vue.js ? Last Updated : 18 Aug, 2020 Comments Improve Suggest changes Like Article Like Report 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 hoveringExpanding Comment More infoAdvertise with us Next Article How to Call an Action From Within Another Action in Vuex ? M mera_yasu_yasu Follow Improve Article Tags : JavaScript JavaScript-Misc Vue.JS Similar Reads How to close model from a button using vue.js ? This article will tell us about how to close a modal from a button using vue.js. To close a modal using vue.js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the actio 2 min read How to create waves on button with CSS and HTML? The wave effect on a button is a type of effect in which the shape of the button turns into a wave on hovering. While there are other ways to create a wave effect, a simple method is to use the keyframe property. Approach: In order to animate the button, we use keyframe to gradually set the transiti 2 min read How to Call a Function with Mouse Hover in VueJS ? In Vue.js, the function can be triggered when the element is hovered using directives like @mouseover or @mousemove, allowing for dynamic interactions based on mouse movements. Table of Content Using @mouseover DirectiveUsing @mousemove DirectiveUsing @mouseover DirectiveIn this approach, we are usi 2 min read How to Call an Action From Within Another Action in Vuex ? Vuex is a state management library for Vue applications. As we know passing props can be tedious for complex applications with many components, Vuex makes this interaction very seamless and scalable. In Vuex, actions are functions that perform asynchronous operations and commit mutations to modify t 3 min read How to display button on hover over div in Tailwind CSS ? Tailwind CSS provides a huge number of CSS utility classes that allow you to quickly apply to style and easily construct custom designs. In this article, weâll see how to display the button when hovering over the div in TailwindCSS.Example 1: Create a <div> element and apply group and relative 2 min read How to expand panel on hover in CSS ? Expanding a Hover Panel is a common UI effect where a Panel increases in size or reveals additional content when the user hovers over it with their cursor. This effect is frequently used in web design to provide interactivity and enhance user experience. These are the following approaches to expand 4 min read Like