Related Articles

Related Articles

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. 

HTML Button Code:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
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>

chevron_right


Output:



To make the button more attractive, we use some CSS properties.

CSS

filter_none

edit
close

play_arrow

link
brightness_4
code

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;
  }

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
    },
  }
})

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :