Creating consistent buttons through CSS overrides
This simple link: <a href="URL">Visible Link Text</a>
Becomes a blue button with the addition of these classes - which are available from the CSS Overrides file.
<a class="uebutton color-blue icon pdf" href="URL"><span class="null">Visible Link Text</span></a>
uebutton - established basic button characteristics.
Defines the color or the button background and text color. Each already has a fixed hover color.
makes the buttons full with of column
centers to the text in the button width. (not needed is button is not full width)
makes top margin 0 and set bottom margin tighter for stacking buttons
When hand coding buttons: target="_blank" rel="noopener noreferrer" is added to A tag when a link is opening a new window.
If buttons are being added in an "Embed App" the Aria attributes must be added to the A tag by hand.
Example: add this code inside the A tag: aria-label="text for WCAG guidelines"