Buttons and Links

Global Hover and Focus

Buttons and link :hover and :focus states underline text to ensure a noticable state-change when navigating or tabbing through content. This customization is found in scss/_d-enhancements.scss.

Below is an example of the modified hover and focus states made to buttons with Bootstrap's btn class.

Icon only buttons and links

Create an icon button or link using the free version of Font Awesome. Add a no-btn-style class to a <button> or <a> tag. Two <span> tags are needed to complete the icon. The first <span> uses Bootstrap's .sr-only class, which provides a descriptive label for screen readers.

We recommend this method over the use of aria-label="Description", because we found aria-label sometimes does not work with Google's translate API. Further aria-label is sometimes ignored by screen readers.

The second span is the icon itself. Instances of Font Awesome icons should include a attribute.

• Search
• Language
• Facebook
• Twitter

                            
                                <button class="no-btn-style" type="button" title="Search">
                                    <span class="sr-only">Search</span>
                                    <span class="fas fa-search" ></span>
                                </button>
                            
                        

                            
                                <a class="no-btn-style text-reset" href="#1" title="Facebook">
                                    <span class="sr-only">Facebook</span>
                                    <span class="fab fa-facebook-f" ></span>
                                </a>
                            
                        

Icons inside buttons and links

To use a Font Awesome icon with any <button> or <a> element, simply add a has-icon class to the parent element. Wrap the button text with <span class="title"> selector.

• Button
• Link

A small left margin is present on the title selector to visually separate the icon from the text. The variable $icon-margin is found in scss/_e-supplementary-classes.scss under G. Has icon.

                            
                                <button class="btn btn-lg btn-primary has-icon" type="button">
                                    <span class="fab fa-accessible-icon" ></span>
                                    <span class="title">Accessible</span>
                                </button>
                            
                        

                            
                                <a class="text-primary has-icon" href="#1">
                                    <span class="fab fa-accessible-icon" ></span>
                                    <span class="title">Accessible</span>
                                </a>
                            
                        

Icon Position

On buttons and links with .has-icon class, add the class .disperse to make the .btn selector fill the width of it's parent, and position the icon across from the text.

Disabled States

Buttons and links with a disabled class include the css rule cursor: not-allowed;, which on hover, indicates that the button is disabled.

• Primary
• Link

                            
                                <button class="btn btn-lg btn-block btn-primary disabled" type="button" aria-disabled="true" tabindex="-1">
                                    Primary
                                </button>
                            
                        

                            
                                <a class="disabled" title="Link" aria-disabled="true" tabindex="-1">
                                    Link
                                </a>
                            
                        

Links within articles

For accessibility, all links without a class (unstyled) that are present within #primary-content have text-decoration:underline; applied. This customization is found in scss/_d-enhancements.scss.