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.
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>