Close button

Provides styles for a global close button.

Overview

The close button is styled using the .close class. It is recommended to add the aria-label=Close attribute to improve accessibility.

<button class="close" aria-label="Close"></button>

Size

The size of the close button can be modified by changing the font-size style.

<button class="close" aria-label="Close"></button> <button class="close" aria-label="Close" style="font-size:20px"></button> <button class="close" aria-label="Close" style="font-size:24px"></button>

Color

The color of the close button can be modified by changing the color style.

<button class="close" aria-label="Close"></button> <button class="close" aria-label="Close" style="color:#F25555"></button> <button class="close" aria-label="Close" style="color:#F5AB23"></button>

Download

Get a bundle with all close button styles.

Download
<p>Get a bundle with all close button styles.</p> <a href="/styles/atoms/close.css" download="cs-close.css" target="_blank" class="btn btn--primary">Download</a>

results matching ""

    No results matching ""