Open In App

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

Last Updated : 18 Aug, 2020
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



Similar Reads

How to create button hover animation effect using CSS ?
Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::selection pseudo-element is used to change the color
3 min read
Split Skewed Button Hover Animation using CSS
Split Skewed Button Hover Animation effect can be created using the before and after pseudo-classes in CSS. On hovering change skewness and swap the positions of before and after pseudo-class. Steps: Create an HTML file named index.html.Create a div element for the button.Add styles to the button.On both the before and after pseudo-class of the but
2 min read
Primer CSS Truncate Expand on Hover or Focus
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
3 min read
How to Expand Sidebar on Hover in CSS ?
Sidebar is the navigational element of the application, through which the user can navigate and explore the entire scope of the application. We can add the functionality of expanding the sidebar on hover in CSS using various approaches. Below are the approaches to expand the sidebar on hover in CSS: Table of Content Using CSS TransitionUsing CSS Sc
3 min read
How to expand panel on hover in CSS ?
Expanding a Hover Panel is a common UI effect where a Panel increases in size or reveals additional content when the user hovers over it with their cursor. This effect is frequently used in web design to provide interactivity and enhance user experience. These are the following approaches to expand the Panel on hover in CSS: Table of Content Using
4 min read
CSS | Animation to Change the Hover State of a Button/Image
1. To change the color/size of the button in hover state. Approach: Set the animation and time duration of hover stateSet background color using @keyframes Syntax: button:hover { animation-name: background-color; animation-duration: 500ms; } @keyframes background-color { 100% { background-color:#4065F3; } } Examples: C/C++ Code &lt;!DOCTYPE html
2 min read
How to Set URL Query Params in Vue with Vue-Router ?
Vue Router is a navigation library designed specifically for Vue.js applications. In this article, we will learn about the different methods of setting the URL query params in Vue with Vue-Router. Below is the list of all possible methods. Table of Content Using router-linkUsing push() methodUsing replace() methodSteps to Setup the Project Environm
6 min read
Create a Hover effect in Vue.js
Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. To create the hover effect to get mor
1 min read
Underline Hover Animation Effect using Tailwind CSS
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever w
3 min read
How to Create Ghost Text Animation on Hover using HTML and CSS?
Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS. HTML Code: In this section we have a ul tag which consists of some li tags displaying some text. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8
2 min read