Button

A button is an element that is used to start or stop some sort of function on the page. Contrast to a link, whose purpose is to take the user elsewhere. Buttons are used for actions such as submitting a form or opening and closing an element like a dialog or accordion.

Code

Standard button

<button class="button {button-color} {button-size} {button-shape} {button-style}"></button>

Link button (Semantic link with a button appearance)

<a class="link-button {button-color} {button-size} {button-shape} {button-style}" href="#"></a>

Button with icons

These csan also be used with link buttons.

If an icon does not require alternative text (if the icon is just supplementary to the text), then the alt text areas can be left blank. Always include alt text if the icon is used alone or if the text content of the button requires the icon to understand the purpose of the button.

Custom Icon

You can use a selection of built-in icons included in CDS. Refer to the cornell-custom.css file in your theme for all of the options available to you.

<button class="button {button-color} {button-size} {button-shape} {button-style}" href="#">
    <span class="icon-arrow-left"><img src="#" alt="Icon Alt Text" /></span>
    Button text (can also go before the icon)
</button>

FontAwesome

Some FontAwesome icons require an active license. You can use icons available in FontAwesome Version 4.7. To use more recent icons, you must add support to your child theme separately.

<button class="button {button-color} {button-size} {button-shape} {button-style}" href="#">
    <span class="fa fa-angle-left"><span class="sr-only">Icon Alt Text</span></span>
    Button text (can also go before the icon)
</button>

Material Design Iconic Font (ZMDI)

Material Design Iconic Font icons are included in CDS. You can use icons up to ZMDI Version 2.2

<button class="button {button-color} {button-size} {button-shape} {button-style}" href="#">
    <span class="zmdi zmdi-chevron-left"><span class="sr-only">Icon Alt Text</span></span>
    Button text (can also go before the icon)
</button>

Classes

{button-color}

Defines the primary background color of the button. Please refer to the Accessibility Expectations section for a list of compatible text colors.

Class	Description
Default (no class)	The button has a background color of #006699. The text color is #ffffff.
.blue	The button has a background color of #006699. (Same as default, but can be used to override if needed)
.red	The button has a background color of #b31b1b.
.light-red	The button has a background color of #df1e12. Active states darken this color by 7%.
.navy	The button has a background color of #073949.
.green	The button has a background color of #4b7b2b.
.black	The button has a background color of #000000. Hover and focus lighten this color by 20%. Active states lighten this color by 30%.
.gray	The button has a background color of #60646a.
.white	The button has a background color of #ffffff. The text color is changed to #000000. Hover and focus darken this color by 5%. Active states darken this color by 10% and change the text color to #444444.
.light-gray	The button has a background color of #efefef. The text color is changed to #000000. Hover and focus darken this color by 5%. Active states darken this color by 10% and change the text color to #444444.
.medium-gray	The button has a background color of #dbdbdb. The text color is changed to #000000. Hover and focus darken this color by 4%. Active states darken this color by 10% and change the text color to #333333.
.dark-gray	The button has a background color of #2b2b2b.

    <button class="button">Default Button</button>
    <button class="button blue">Blue Button</button>
    <button class="button red">Red Button</button>
    <button class="button light-red">Light Red Button</button>
    <button class="button navy">Navy Button</button>
    <button class="button green">Green Button</button>
    <button class="button black">Black Button</button>
    <button class="button gray">Gray Button</button>
    <button class="button white">White Button</button>
    <button class="button light-gray">Light Gray Button</button>
    <button class="button medium-gray">Medium Gray Button</button>
    <button class="button dark-gray">Dark Gray Button</button>

Button Color Demo

Default Button Blue Button Red Button Light Red Button Navy Button Green Button Black Button Gray Button White Button Light Gray Button Medium Gray Button Dark Gray Button

{button-size}

Defines the size of the button. Specific CSS property values can be found in _ui.scss.

Class	Description
Default (no class)	The buttons have a standard amount of padding.
.small, .mini	The buttons have reduced top and bottom padding compared to default.
.large	The buttons have reduced padding on the top and bottom and large padding on the left and right.

    <button class="button">Default Button</button>
    <button class="button small">Small Button</button>
    <button class="button large">Large Button</button>

Button Size Demo

Default Button Small Button Large Button

{button-shape}

Defines the shape of the button

Class	Description
Default (no class)	The buttons have squared off corners.
.curved	The buttons have a 0.25em border radius.
.round	The buttons have a 100em border radius.

    <button class="button">Default Button</button>
    <button class="button curved">Curved Button</button>
    <button class="button round">Round Button</button>

Button Shape Demo

Default Button Curved Button Round Button

{button-style}

Defines the border and gradient effects of the button.

Class	Description
Default (no class)	The button has no border.
.bordered	The button has a 1px semi-transparent black border. The opacity of the border varies depending on the color and the focus/hover states.
.classic	The button has both a 1px semi-transparent black border and a slight gradient, giving it an embossed appearance.

    <button class="button">Default Button</button>
    <button class="button bordered">Bordered Button</button>
    <button class="button classic">Classic Button</button>

Button Style Demo

Default Button Bordered Button Classic Button

Accessibility Expectations

Modality	Description	Criterion
All	Sufficient color contrast between the button's text and background.	1.4.3
All	Sufficient color contrast between the button's background and the surrounding content.	1.4.11
All	Button has a clear visual focus indicator when it receives focus (e.g., keyboard focus).	2.4.7
All	Button's purpose is clearly conveyed through its label.	2.4.4
All	If the button performs an action that changes the context of the page, this change is clearly communicated to the user.	3.2.2
Cognitive	Button label is clear, concise, and easy to understand.	1.3.1
Cognitive	Visual design of the button is consistent with other interactive elements on the site.	3.2.3 Best Practice
Motor	Button has an appropriate size and spacing to allow for easy interaction. (24px diameter non-overlapping target area)	2.5.8
Keyboard	Button is operable by using the Tab key to give it focus, then using Space or Enter to activate.	2.1.1
Screen Reader	If the button has an icon, the icon has appropriate alternative text (e.g., using aria-label or an <img> tag's alt attribute if the icon is purely decorative, use aria-hidden="true").	1.1.1
Screen Reader	Screen reader announces the button's label and role (button).	1.3.1
Speech	Accessible name of the button includes the visual label of the button.	2.5.3
Vision	Button has sufficient size and spacing to be easily seen and interacted with.	1.4.11