Buttons are an essential part of web design, and adding advanced effects can significantly improve user engagement and aesthetics. In this guide, we’ll create the “Aurora Button Effect” — a sleek, modern button with gradient colors, a ripple click effect, and a glowing hover effect.
Color Details
- Gradient Colors:
- Start:
#6a11cb(Purple) - End:
#2575fc(Blue) - Hover Gradient Colors:
- Start:
#5c0dab(Darker Purple) - End:
#1e63cc(Darker Blue) - Ripple Effect Color:
rgba(255, 255, 255, 0.3) - Glow Effect Color:
rgba(255, 255, 255, 0.1) - Inner Shadow Color:
rgba(0, 0, 0, 0.05)
Unique Features of the Aurora Button
- Gradient Background: Smooth transition between two vibrant colors.
- Hover Effect: Changes gradient and increases shadow for a lifted appearance.
- Ripple Effect: Provides visual feedback on click.
- Glowing Effect: Adds a subtle glow around the button on hover.
- Inner Shadow: Enhances the button’s 3D look.
- Responsiveness: Adjusts seamlessly for smaller screens.
Complete CSS for the Aurora Button Effect
/* Base button styling */
.wpglide-button {
background: linear-gradient(135deg, #6a11cb, #2575fc); /* Gradient from purple to blue */
color: #fff;
border: none;
padding: 15px 30px;
font-size: 16px;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 50px; /* More rounded for a modern look */
cursor: pointer;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
z-index: 1;
}
/* Hover effect */
.wpglide-button:hover {
background: linear-gradient(135deg, #5c0dab, #1e63cc); /* Slightly darker gradient */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
/* Ripple effect on click */
.wpglide-button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 300%;
height: 300%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) scale(0);
transition: all 0.5s ease;
border-radius: 50%;
z-index: -1;
}
.wpglide-button:active::before {
transform: translate(-50%, -50%) scale(1);
transition: all 0s;
}
/* Glowing effect */
.wpglide-button:hover::after {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.wpglide-button:hover::after {
opacity: 1;
}
/* Gradient inner shadow effect */
.wpglide-button::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50px;
background: rgba(0, 0, 0, 0.05); /* Subtle dark overlay */
z-index: -2;
opacity: 0;
transition: opacity 0.3s ease;
}
.wpglide-button:hover::after {
opacity: 1;
}
/* For small screens */
@media (max-width: 600px) {
.wpglide-button {
padding: 10px 20px;
font-size: 14px;
}
}Demo: Aurora Button Effect
Step-by-Step Guide to Add the Aurora Button to WordPress
- Create a Button Element: Add the following HTML to your WordPress post or page where you want the button to appear.
<button class="wpglide-button">Click Me</button> - Add CSS to Your Theme:
- Option 1: Add the CSS to your theme’s stylesheet.
- Option 2: Add the CSS to the custom CSS section in the WordPress Customizer (Appearance > Customize > Additional CSS).
- Update the Button Class: If you already have buttons on your site and want to apply the Aurora Button Effect, update the class of those buttons to
wpglide-button.<button class="wpglide-button">Existing Button</button> - Save and Publish: Save your changes and publish your post or page. Your button should now have the Aurora Button Effect applied.
Conclusion
By following these steps, you’ve created a professional and interactive button for your WordPress site using the Aurora Button Effect. This button not only looks great with its gradient background and advanced effects but also enhances user engagement. Try it out on your site and see the difference a well-designed button can make!
