Buttons & Links
Buttons
Default Buttons
The .btn class is the base class used for buttons. Additional modifiers can be used to adjust the appearance of the button to suit its context.
<a class="btn" href="#">Default Button</a>
<!-- An external icon is automatically appended to a button linking to an external target -->
<a class="btn" href="https://archive.org/">Default Button with external link</a>
<!-- Additional classes can be used to adjust the appearance of a button -->
<a class="btn btn-lg" href="#">Large Button</a>
<a class="btn btn-sm" href="#">Small Button</a>
Call to Action Buttons
The .btn-cta class can be used to bring more prominence to a button. It changes the background and increases the default size.
<a class="btn btn-cta" href="#">Call to Action Button</a>
<a class="btn btn-cta" href="https://archive.org">Call to Action Button with external link</a>
<a class="btn btn-cta btn-more" href="#">Call to Action 'More' Button</a>
<a class="btn btn-cta btn-sm" href="#">Small Call to Action Button</a>
<a class="btn btn-cta btn-lg" href="#">Large Call to Action Button</a>
‘More’ Buttons
The .btn-more class can be used to add an arrow to the right side of the button. This is meant to be used for designating when the target page is a continuation of the current content.
<a class="btn btn-more" href="#">Default 'More' Button</a>
<a class="btn btn-cta btn-more" href="#">Call to Action 'More' Button</a>
<a class="btn btn-inline btn-more" href="#">Inline 'More' Button</a>
Inline Buttons
The .btn-inline class can be used to remove background from button.
<a class="btn btn-inline" href="#">Inline Style Button</a>
<a class="btn btn-inline btn-more" href="#">Inline "More" Button</a>
<a class="btn btn-inline btn-more btn-sm" href="#">Small "More" Button</a>
Light Buttons
The .btn-light class can be used when the button is over a dark background.
<a class="btn btn-light" href="#">Light Button</a>
<a class="btn btn-light btn-cta" href="#">Light CTA Button</a>
<a class="btn btn-light btn-inline" href="#">Light Inline Button</a>
<a class="btn btn-light btn-more" href="#">Light More Button</a>
Action Buttons
The .btn-action class creates round buttons with hidden text. For use with svg icons within the button.
<a class="btn btn-action" href="#"><span class="icon" data-icon="chevron-up"></span> Back to top</a>
<a class="btn btn-action" href="#"><span class="icon" data-icon="feed"></span> Subscribe to Events</a>
<a class="btn btn-action btn-sm" href="#"><span class="icon" data-icon="chevron-up"></span> Back to top</a>
<a class="btn btn-action btn-sm" href="#"><span class="icon" data-icon="feed"></span> Subscribe to Events</a>
Button CSS Reference
The following CSS classes can be used in conjunction with the .btn class to modify the appearance of a button.
| Class | Description |
|---|---|
.btn-cta |
Call to Action modifier. Changes background and size of button. |
.btn-inline |
Inline button modifier. Removes background. |
.btn-more |
More button modifier. Adds ‘more’ arrow to right side. |
.btn-lg |
Large button modifier. Increases size of button. |
.btn-sm |
Small button modifier. Decreases size of button. |
.btn-light |
Light button modifier. Lightens background color. For use on dark backgrounds. |
.btn-dark |
Dark button modifier. Darkens background color. For use on light backgrounds. |
.btn-action |
Action button modifier. Creates round button with hidden text. For use with svg icons within the button. |
Button Groups
The .btn-group class can be used for grouping buttons together in a row.
<p class="btn-group">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</p>
Links
Inline
<p>This is a sentence with an <a href="https://www.nd.edu/">inline link to nd.edu.</a> To include an external icon with an inline link, like this <a href="https://www.nd.edu/" class="external-link">link to nd.edu</a>, the `external-link` class can be used.</p>
Anchor Links
Anchor links take a user to a designated spot on the page. We only recommend using anchor links on pages that are abnormally long and difficult to scroll. Anchor links can link to any piece of content, but are most clear to your user when used with headings.
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Anchor Link 1 Destination
Anchor Link 1
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Anchor Link 1 Destination
<p><a href="#anchor-link-1">Anchor Link 1</a></p>
<!-- Content... -->
<!-- Target of anchor link -->
<a id="anchor-link-1"></a>
<h4>Anchor Link 1</h4>
Tags
The .tag class can be used to style links, such as categories or tags associated with an article.
<p><a href="#" class="tag">Tag A</a> <a href="#" class="tag">Tag B</a></p>
File link icons
The icons associated with these links are automatically generated based on the file type.