button-style-backdrop

@include button-style-backdrop($blur);

Description

Add a translucent, blurred (where supported) backdrop to outlined buttons to help with legibility.

Parameters

$blur (unit)
The amount to blur the backdrop by.
Default: 10px

Return

(CSS) Styles to apply backdrop to buttons.

Example

Apply backdrops to buttons

@include button-style-backdrop();

Interactive example

📘

Blur support

Not all browsers support the backdrop-filter property. When not supported, the backdrop will instead have a slightly more opaque backdrop to ensure legibility.