The :active pseudo-class selects an element while the user is activating it. For a button, it can replace an outside shadow with inset shadows, making the control appear pressed; releasing the mouse restores the original styling. section 13.2.1
Create a pressed button
Apply a normal shadow to the button, then override it in the active state: .button:active { box-shadow: inset 0 0 0.5em oklch(26% 0.07 263deg), inset 0 0.5em 1em rgb(0 0 0 / 0.4); }. The inset keyword renders the shadows inside the element, while multiple comma-separated shadows deepen the pressed effect. section 13.2.1
When active styling competes with other link states, remember:
- With equal specificity, later declarations win; the conventional link order is :link, :visited, :hover, :active. section 1.1.4
- An active link can also be hovered, but its later active rule takes precedence when specificity is equal. section 1.1.4
Listing 13.11 Button styles with a gradient and shadow
.button {
padding: 1em;
border: 0;
font-family: Helvetica, Arial, sans-serif;
color: white;
border-radius: 0.5em;
background-image: linear-gradient( #1
to bottom, #1
oklch(57% 0.11 263deg), #1
oklch(40% 0.13 263deg) #1
); #1
box-shadow: 0.1em 0.1em 0.5em oklch(26% 0.07 263deg); #2
}
.button:active {
box-shadow: inset 0 0 0.5em oklch(26% 0.07 263deg), #3
inset 0 0.5em 1em rgb(0 0 0 / 0.4); #3
}
Inspect the complete gradient button rule and its :active shadow override. section 13.2.1
