Stylish Pay Button with SVG Icon and Hover Ripple Effect Using HTML & CSS

A well-designed button can make or break your user interface. In this post, we’ll explore a sleek “Pay” button that blends minimalist design with a powerful hover animation — all crafted using pure HTML and CSS.

This button features an SVG icon, a clean layout, and an eye-catching hover effect that creates a ripple-like animation without using JavaScript.

What This Button Does

When the user hovers over the button:

• A white circular shape slides in from the left, creating a ripple animation.

• The button background blends dynamically thanks to the mix-blend-mode: difference.

• On click, the button moves slightly to give it a realistic press effect.

These interactive cues guide users and enhance the overall user experience.

Key Features of the Button

1. Clean Layout and Centered Content

The button uses flexbox to perfectly center both the “Pay” text and the SVG credit card icon side-by-side, with a neat spacing (gap: 8px).

2. SVG Icon Integration

Instead of relying on external icon libraries or images, this button includes a built-in SVG path of a credit card. This ensures:

• Fast loading

• High-quality rendering on all devices

• Scalability without pixelation

3. Animated Hover Effect with ::before

The hover effect is created using a ::before pseudo-element that:

• Starts off-screen as a large white circle

• Slides across the button on hover

• Uses mix-blend-mode: difference to invert colors, creating a unique visual effect

• Transitions smoothly in 0.3 seconds

4. Press/Click Feedback

When clicked, the button slightly shifts using the :active state, simulating a soft press with movement (transform: translate(5px, 5px)).

Why Use This Button?

This “Pay” button is perfect for:

• Checkout pages

• Subscription prompts

• Donation or e-commerce CTAs

• Web apps requiring payment confirmation or wallet actions

It provides a modern, responsive, and intuitive interaction without depending on JavaScript or third-party frameworks.

Fully Customizable

You can easily modify:

• Button color (background-color)

• Icon (.svgIcon path)

• Size and shape (width, height, border-radius)

• Text (Pay, or anything else like “Buy Now” or “Donate”)

The design remains consistent and performs well across all browsers.

Learning Takeaways

This code snippet is a great example of how CSS pseudo-elements (::before) and blend modes (mix-blend-mode) can be used to produce advanced visual effects. You don’t need complex tools or animations — just creative use of what CSS already offers.

Final Words

If you’re building a modern interface that requires a polished call-to-action button, this “Pay” button offers the perfect balance of function and style. With built-in responsiveness and clean code structure, it’s a great addition to any frontend project.