liveBook · Manning

Destructive button

As explained in Tiny CSS Projects

A destructive button is an interface control that performs an action with potentially irreversible or undesirable consequences, such as removing content.

A destructive button marks a potentially undesirable action, such as removing an item from a checkout cart. Red styling makes the consequence visible without making the control dominant. section 8.2.2

A compact destructive button combines:

  • Red border, text, and hover or focus outline to emphasize the action. section 8.2.2
  • A 50% border radius and reduced padding so the control does not dominate the cart table. section 8.2.2
  • Vertical centering for an image inside the button. section 8.2.2

How Tiny CSS Projects covers it

How deep it goes
Defines concrete CSS declarations and explains their visual rationale, including color, shape, spacing, focus, and image alignment.
Examples
Uses a circular red Remove button containing a centered image in a checkout cart table.
What it assumes
Assumes a baseline button style and familiarity with basic CSS declarations and interaction pseudo-classes.
What you can do after
Apply CSS to distinguish destructive actions while preserving visible hover, focus, spacing, and image-alignment behavior.
How it connects
Connects destructive buttons with hover states, focus states, call-to-action styling, and vertical alignment.
Cover of Tiny CSS Projects
liveBookmanning.com
Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.