== Background/Goal
There are some inconsistencies in our current Normal and Quiet Codex buttons on hover and active states:
===== Normal buttons:
- Destructive active uses white background while progressive and neutral use subtle flavour color backgrounds (normal-destructive should use `background-color-destructive--subtle` instead)
{F35477799}
===== Quiet buttons:
- Quiet neutral button uses subtle background with border while progressive and destructive use solid dark background (with white text).
{F35477826}
=== Design spec
| [[ https://www.figma.com/file/DOzfZ59BHKVUG0WQAsSId4/Active-Normal-buttons---T303384?node-id=114%3A331 | Figma spec sheet here. ]] |
=== Acceptance criteria (or Done)
**Design**
[-] Redesign normal and quiet buttons hover and active states to be consistent
[] Publish updated buttons in our [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/?node-id=4903%3A52965 | Codex library ]] Figma file
**Code**
[] **Normal buttons:**
[] Destructive: Update hover state with `background-color-destructive--subtle` #FFE7E6
[] **Quiet buttons:**
[] Progressive:
[] Hover: update background with combination of `background-color-progressive--subtle` (#EAF3FF) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-progressive--subtle` (#EAF3FF) + `opacity-medium` (0.65) and text/icon with `color-progressive--active`
[] Destructive:
[] Hover: update background with combination of `background-color-destructive--subtle` (#FFE7E6) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-destructive--subtle` (#FFE7E6) + `opacity-medium` (0.65) and text/icon with `color-destructive--active`
[] Neutral:
[] Hover: update background with combination of `background-color-interactive` (#EAECF0) + `opacity-low` (0.3)
[] Active: update background with combination of `background-color-interactive` (#EAECF0) + `opacity-medium` (0.65) and **delete border** from the active button