Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 18 Aug, 2020

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. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :