Open In App

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

Improve
Improve
Like Article
Like
Save
Share
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 hovering

Expanding



Last Updated : 18 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads