Buttons
The <button> element represents a clickable button, which can be used in forms or anywhere in a document that needs simple, standard button functionality.
<button> by Mozilla Contributors is licensed under CC-BY-SA 2.5.
Button Details
There are lots and lots and lots of rules for buttons, and there are also lots and lots of options for buttons. It’s worth reading up on the dos and don’ts of buttons in order to ensure your buttons will function as expected by all users. Here are some good places to start:
Whenever semantically appropriate, anything that functions as a button should be coded as a <button>. However, the Delta Design System does provide CSS classes to make any <span> or <a href> element look like a button.
The Delta Design System’s normal button uses the $primary color application and handles both the default button state, as well as the :hover and :focus states.
Button Examples
Primary Buttons
<button type="button">Button</button>Secondary Buttons
Add a .secondary class to the button to use the design system’s secondary color application.
<button type="button" class="secondary">Button</button>Reverse Buttons
Though we’d prefer you keep it simple and not use too many button styles, you can also add a .reverse class to the button to create a button with a white background. This option works for both the primary and secondary colors.
<button type="button" class="reverse">Button</button>
<button type="button" class="reverse secondary">Button</button>Buttons with Icons
Lots of situations these days call for a button with an icon. Just add the desired svg code to the button label and you should be all set.
<button type="button">Button<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg></button>