Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Expand button with Animation on Hover using Vue.js ?
Creating expanding button animations on hover enhances user interaction and provides visual feedback. Vue.js offers powerful reactive features that make implementing smooth hover animations straightforward through event handlers and dynamic class binding.
Vue.js is a progressive JavaScript framework that excels at building interactive user interfaces. It provides a declarative and component-based approach for creating animated UI elements that respond to user interactions. Vue.js works seamlessly with HTML, CSS, and JavaScript to deliver smooth animations.
Vue.js provides @mouseover and @mouseout event listeners that trigger custom functions when users hover over elements. These events enable dynamic class toggling for creating expand animations.
Approach 1: Using User-Defined Methods to Toggle Classes
This approach uses custom Vue.js methods to dynamically add and remove CSS classes that control the button's expanded state and animation effects.
Syntax
<button :class="dataKey" @mouseover="hoverFunction" @mouseout="hoverOutFunction"> Button Text </button>
Here, dataKey is a reactive data property containing CSS class names, and hoverFunction are methods that modify the classes array when hover events occur.
Algorithm
Step 1: Define the button structure using HTML and base CSS styles.
Step 2: Import Vue.js from CDN to enable reactive functionality.
Step 3: Create Vue instance with data property containing classes array and methods for hoverOver and hoverOut functions.
Step 4: Define the animated CSS class with transform and transition properties for smooth expansion effects.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Button Hover Animation - Method Toggle</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
background: #2c3e50;
padding: 50px;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
#app {
background-color: #ecf0f1;
border-radius: 15px;
padding: 60px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
}
button {
background-color: #3498db;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
}
.animated {
background-color: #e74c3c;
transform: scale(1.2);
border-radius: 20px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div id="app">
<h1>Expand Button Animation</h1>
<button :class="classes" @mouseover="hoverOver" @mouseout="hoverOut">
Hover Me
</button>
</div>
<script>
new Vue({
el: "#app",
data: {
classes: []
},
methods: {
hoverOver: function () {
this.classes = ['animated'];
},
hoverOut: function () {
this.classes = [];
}
}
});
</script>
</body>
</html>
This creates a button that expands (scales to 1.2x) and changes color when hovered, with smooth transitions controlled by Vue.js methods.
Approach 2: Toggle Class Based on Boolean Variable
This method uses a reactive boolean variable to conditionally apply CSS classes, providing a more direct approach for simple hover animations.
Syntax
<button :class="{className: booleanVar}" @mouseover="booleanVar = true" @mouseout="booleanVar = false">
Button Text
</button>
The :class binding uses an object where the key is the CSS class name and the value is a boolean expression. The @mouseover and @mouseout events directly modify the boolean variable.
Algorithm
Step 1: Define button structure and base styling with CSS.
Step 2: Import Vue.js library from CDN.
Step 3: Create Vue instance with a boolean data property (e.g., hover: false).
Step 4: Bind the boolean variable to the desired CSS class using object syntax in :class.
Step 5: Use inline event handlers to toggle the boolean value on mouseover and mouseout.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Button Hover Animation - Boolean Toggle</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
background: #34495e;
padding: 50px;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
#app {
background-color: #bdc3c7;
border-radius: 15px;
padding: 60px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
margin-bottom: 30px;
}
button {
background-color: #27ae60;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.4s ease;
border-radius: 8px;
}
.animated {
background-color: #8e44ad;
transform: scale(1.3);
border-radius: 25px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div id="app">
<h1>Boolean-Based Hover Animation</h1>
<button :class="{animated: hover}" @mouseover="hover = true" @mouseout="hover = false">
Expand Button
</button>
</div>
<script>
new Vue({
el: "#app",
data: {
hover: false
}
});
</script>
</body>
</html>
This example demonstrates a cleaner approach using direct boolean binding, where the button scales to 1.3x and changes to purple when hovered.
Advanced Expansion Animation
For more sophisticated animations, you can combine multiple CSS properties and Vue.js reactivity to create complex expansion effects.
Example Multi-Property Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Button Expansion</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 50px;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
#app {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 50px;
text-align: center;
}
button {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: none;
color: white;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.expand {
transform: scale(1.15) translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
padding: 16px 32px;
}
</style>
</head>
<body>
<div id="app">
<h1>Advanced Expansion Effect</h1>
<button :class="{expand: isExpanded}" @mouseover="isExpanded = true" @mouseout="isExpanded = false">
Advanced Button
</button>
</div>
<script>
new Vue({
el: "#app",
data: {
isExpanded: false
}
});
</script>
</body>
</html>
This advanced example combines scaling, vertical translation, shadow effects, and padding changes for a more sophisticated expansion animation.
Comparison of Approaches
| Aspect | Method Toggle | Boolean Variable |
|---|---|---|
| Code Complexity | More complex with separate methods | Simpler with inline expressions |
| Flexibility | Highly flexible for complex logic | Limited to simple true/false states |
| Performance | Slightly more overhead | Minimal overhead |
| Maintenance | Better for complex animations | Easier for simple hover effects |
| Debugging | Console logging possible in methods | Direct |
644 Views
