Button
Buttons extend the .control class and can be used with different html attributes.
<button class="btn">Button</button>
<button class="btn" disabled>Button disabled</button>
<a href="#" class="btn">Link Button</a>
<input type="submit" class="btn" value="Submit button" />Colors
We are using the bg colors to modify the btn color. In combination with the accent color for hover effects.
White
<button class="btn bg-white">Button</button>White Button Showcase
Shows the white button on all background variations.
Black
<button class="btn bg-black">Button</button>Black Button Showcase
Shows the black button on all background variations.
Hover effect
The hover effect when using bg colors is disabled when using disabled attributes. Or you can manually disable it with .no-hover.
<button class="btn bg-black" aria-disabled="true">Disabled by aria</button>
<button class="btn bg-black" disabled>Disabled</button>
<button class="btn bg-black no-hover">No hover</button>Container
You can use the container class to wrap your content in a container.
<div class="container"></div>Image
We are using the <picture> tag to display images. Using source to give different images sizes for specific image widths. In this example, we have two
different images for 260px and 520px width. If the image is smaller than 260px, the first image will be displayed. If the image is smaller than 260px
the 260x260 preview image will be used.
You can set the loading="lazy" attribute to lazy load the image.
<picture class="image">
<source media="(max-width: 260px)" srcset="img/preview-260x260.png">
<source media="(max-width: 520px)" srcset="img/preview-520x520.png">
<img alt="Image Preview" src="img/preview-520x520.png" width="520" height="520"/>
</picture>