Animated Delete Button with Expanding Icon Using HTML & CSS

Designing intuitive user interactions is key to great UI/UX. One creative and engaging example is this animated “Delete” button that expands into a full-width icon on hover. In this post, we’ll explore how the effect is built using just HTML and CSS — no JavaScript required.

What This Button Does

When the button is in its default state, it displays the word “Delete” alongside a small icon. However, when a user hovers over the button:

• The text fades out smoothly.

• The icon expands to fill the entire width of the button.

• A subtle scaling effect appears when the button is clicked, creating a polished press animation.

How It Works

1. HTML Structure

The button contains two key elements:

• A span for the text label (“Delete”)

• A span with an SVG icon (a cross or close symbol)

These elements are organized side by side inside the button container.

2. Base Styling

The button is styled with:

• A fixed width and height

• A red background (#e62222)

• Rounded corners and soft box shadow

• Flexbox layout to align text and icon

3. Hover Animation

Using only CSS transitions:

• On hover, the text fades out by making its color transparent.

• The icon expands from its small fixed size to take up the full button width.

• The left border of the icon container disappears for a cleaner look.

4. Click Interaction

When the button is clicked, the icon scales down slightly using a transform: scale(0.8) effect. This gives a satisfying feel of responsiveness.

Why This Design Is Effective

• Visual Feedback: The color shift and expansion clearly signal the user’s action.

• Minimal & Clean: The design stays simple while still being interactive.

• No JavaScript Needed: This button relies entirely on CSS transitions and flex layout.

• Easily Customizable: Change the icon, color, or size to suit any web design theme.

Where to Use This Button

This style of button is perfect for:

• Delete or Remove actions in admin dashboards

• Close actions on modal windows

• Cancel operations in forms or confirmation prompts

It helps emphasize caution due to the red color and dynamic animation, making it ideal for irreversible or destructive actions.

Try It Yourself

Want to experiment with this effect live? Use tools like Learn Code Online Free Of Cost where you can:

• Edit the code

• See the hover effect in real time

• Customize the icon or add your own touch

This is a great exercise for beginners learning CSS transitions, flexbox, and hover animations.

Final Thoughts

Small details like this animated delete button go a long way in improving the user experience. It gives feedback, enhances interaction, and makes your interface more engaging — all using simple HTML and CSS.