Buttons

Mount Union UI includes several predefined button styles, each serving its own semantic purpose. They can be used and extended in forms, anchors and more.

Solid Buttons #

A simple button used in nearly every instance of Mount Union's site. The default color scheme uses a purple background and white text, but can be customized easily with color utility classes

<button class="btn">Internal</button>
<button class="btn btn-external-link">External</button>

Solid Button States

The following shows the styling of various states for solid buttons

Outline Buttons #

In need of a button, but not the hefty background colors they bring? Use a .btn-outline to remove all background images and colors on any button. Colors can be customized with color utility classes

<button class="btn-outline">Internal</button>
<button class="btn-outline btn-external-link">External</button>

Outline Button States

The following shows the styling of various states for outline buttons

Reveal Buttons #

Reveal buttons, .btn-reveal, should be utilized in places where content toggles are needed.

<button class="btn-reveal">
    <span class="mu-icon-th"></span>
    See Gallery
</button>
<button class="btn-reveal">
    <span class="mu-icon-images-solid"></span>
    See Slideshow
</button>

Reveal Button States

The following shows the styling of various states for reveal buttons

Round Buttons #

The .btn-round selector should be utilized for actions that don't require text and only use an icon. An aria-label attribute that contains contextual text of the button's action needs to be used assist users that require screen readers.

<button
    class="btn-round-lg mu-icon-chevron-right white-bg"
    aria-label="Next"
></button>

<button
    class="btn-round mu-icon-facebook"
    aria-label="University of Mount Union Facebook"
></button>

<button
    class="btn-outline btn-round-sm mu-icon-chevron-down teal"
    aria-label="Down"
></button>
<button
    class="btn-round-sm mu-icon-chevron-up teal-bg"
    aria-label="Up"
></button>

Round Button States

The following shows the styling of various states for round buttons