Button

About

Buttons with background-clip

Alternatives

Accessibility

Requirements

Buttons with background image and fallback background colour (where the background image is a texture/shape)

Issues

Examples

Button background image clipped

This applies a background with an irregular shape to a button or any element - using background-clip: content-box we can make the image ignore the padding and adhere to the content. So if the image doesn’t load for whatever reason, there’s a fallback background-color.

without background-clip: content-box, background color is shown through the transparent image.
with no background image, the fallback background colour shows through
background-clip: content-box in effect with fallback colour

1 Button label 2 Button label 3 Button label

<a href="./" class="c-buttonImg">
    <span class="c-button__body">
        <span class="c-buttonImg__text">Button label</span>
    </span>
</a>