Stylish Newsletter Signup Card with Hover Animation in HTML & CSS

Introduction

A well-designed newsletter signup form can significantly boost user engagement and subscription rates. In this tutorial, we’ll explore how to create a modern, animated Newsletter Signup Card using only HTML and CSS — no JavaScript needed.

This card features slick transitions, input focus effects, button animations, and an eye-catching hover underline for the title. It’s clean, responsive, and easy to integrate into any website.

What This UI Component Includes

• A bold card layout with border and drop shadow

• Hover animations that shift the card slightly for a 3D effect

• A title underline animation that activates on hover

• An interactive email input field with scaling and color changes

• A button hover effect that reveals alternative text (“Sure?”)

• Optional glitch animation class for creative effects

Card Layout & Hover Animation

The .card class creates a 300px-wide white box with a thick black border and drop shadow. When hovered, the card shifts diagonally and deepens the shadow, giving a floating or lifted effect. This creates a modern and playful look that encourages interaction.

Title with Underline Reveal

The .card__title uses a pseudo-element ::after to create a horizontal underline. This underline is hidden by default and slides into view when the user hovers over the card. It’s a small but elegant touch that adds polish and reinforces interactivity.

Input Field Interaction

The email input field is designed with a bold border and generous padding. When focused, it:

• Scales up slightly (transform: scale(1.05))

• Inverts colors for better readability

• Removes the default browser outline

This makes the form feel smooth and responsive.

Animated Submit Button

The Click me button includes:

• A solid black background

• Bold white text in uppercase

• An animated ::before element that slides in green text saying “Sure?” when hovered

• A slight scale-down effect on click (:active)

This adds a fun surprise and confirms intent before submission.

Bonus: Glitch Animation

A .glitch class is included with a keyframe animation that rapidly shakes the element in random directions. You can add this class to any element (like the button or title) to create a glitchy visual effect.

Learning Focus

This project is perfect for practicing:

• CSS transitions and transforms

• Pseudo-elements like ::before and ::after

• Input and button interaction design

• Basic animation principles

It’s also a great example of how small micro-interactions can greatly improve the user experience.

Conclusion

This newsletter form card blends design, animation, and interactivity into a clean, reusable component. It’s ideal for portfolios, blogs, or product landing pages that want to collect emails in a stylish way.

Feel free to customize:

• Colors

• Fonts

• Button text

• Animation timing