Skip to content
Related Articles

Related Articles

How to expand button with animation on hover using Vue.js ?
  • Last Updated : 18 Aug, 2020
GeeksforGeeks - Summer Carnival Banner

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
Recommended Articles
Page :