Skip to content
Related Articles

Related Articles

How to expand button with animation on hover using Vue.js ?

Improve Article
Save Article
  • Last Updated : 18 Aug, 2020
Improve Article
Save Article

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>
    <link rel="stylesheet" href="style.css">
    <div id="app">
        <h1>GeeksForGeeks Button Animation</h1>
        <button :class="classes" 
            This is Button


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:

After CSS

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() {
        this.classes = ['animated', 'zoomIn']
    hoverOut: function() {
        this.classes = []
    hoverOutTimeout: function() {
        setTimeout(() => { 
            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.


Just after hovering


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!