A generic close button for dismissing content like modals and alerts.
The close button in CSS-only mode works differently from a button that trigger Javascript!
A close button mostly closes something which was previously opened. In that case it is enough to make the close button refer to the checkbox that also opened it. A click on the close button triggers a CSS repaint. The style of the page depends on whether the input is checked or not, by this mechanism you can choose to show certain elements such as modal dialogs. This behaviour is supported in all browsers.
Checkbox can be used as on-off switch for content, such displaying and hiding content. To hide the checkbox, add the class noojs-button.
<input type="checkbox" id="modal1openclose">
...
<label for="modal1openclose" class="btn-close" aria-label="Close"></label>
Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.
<button type="button" class="btn-close" aria-label="Close"></button>Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.
<button type="button" class="btn-close" disabled aria-label="Close"></button>Change the default .btn-close to be white with the .btn-close-white class. This class uses the filter property to invert the background-image.
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>$btn-close-width: 1em;
$btn-close-height: $btn-close-width;
$btn-close-padding-x: .25em;
$btn-close-padding-y: $btn-close-padding-x;
$btn-close-color: $black;
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow: $input-btn-focus-box-shadow;
$btn-close-opacity: .5;
$btn-close-hover-opacity: .75;
$btn-close-focus-opacity: 1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);