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

0 0 1 minute read

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