Web Guidelines

Guidelines
Elements
HTML/CSS

Buttons

Custom button styles for primary call to actions, forms, and more with defined sizes, states, brand colors, and more.

Syntax

The button CSS classes are designed to work with <button>, <a>, and <input> tags. By default, we use an <a> with a role of role=”button”, but these classes can also be used in either of the ways shown below.

Copy

<a class=”btn color-class” href=”#” role=”button”>Button</a>
<button class=”btn color-class” type=”button|submit|reset”>Button</button>
<input class=”btn color-class” type=”button|submit|reset”>Button</input>

Primary CTA

Intended to be used once per page or multiple times if the primary CTA is used multiple times. This set of buttons is universal and can be used for any of the Ōnin brands.

Light Background

Copy

<a class=”btn btn-green” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-green” href=”#” role=”button”>Default button</a>
<a class=”btn btn-green-white” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-white” href=”#” role=”button”>Default button</a>

Primary

“Primary” buttons are intended to be used for the majority of buttons on a page.

The Ōnin Group

Light Background

Copy

<a class=”btn btn-blue” href=”#” role=”button”>Default button</a>
<a class=”btn btn-blue-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Ōnin Staffing

Light Background

Copy

<a class=”btn btn-blue” href=”#” role=”button”>Default button</a>
<a class=”btn btn-blue-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Fōcus

Light Background

Copy

<a class=”btn btn-darkBlue-green” href=”#” role=”button”>Default button</a>
<a class=”btn btn-green-darkBlue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Excelsior

Light Background

Copy

<a class=”btn btn-blue” href=”#” role=”button”>Default button</a>
<a class=”btn btn-blue-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Momentum Capital Funding

Light Background

Copy

<a class=”btn btn-gray-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-gray” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

A3 Solutions

Light Background

Copy

<a class=”btn btn-blue” href=”#” role=”button”>Default button</a>
<a class=”btn btn-blue-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold” href=”#” role=”button”>Default button</a>
<a class=”btn btn-gold-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Ōnin Aerospace

Light Background

Copy

<a class=”btn btn-blue-darkBlue” href=”#” role=”button”>Default button</a>
<a class=”btn btn-darkBlue-blue” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>
<a class=”btn btn-lightBlue-white” href=”#” role=”button”>Default button</a>

Secondary

Secondary buttons are intended to be used for less important actions.

Light Background

Copy

<a class=”btn btn-gray” href=”#” role=”button”>Default button</a>

Dark Background

Copy

<a class=”btn btn-white” href=”#” role=”button”>Default button</a>

Sizes

Large or small buttons available via CSS classes.

Copy

<a class=”btn btn-large btn-green” href=”#” role=”button”>Default button</a>
<a class=”btn btn-small btn-green” href=”#” role=”button”>Default button</a>

CSS

CSS for buttons sizes and colors

Copy

/******** Buttons ***********************************************/

 

/********* Buttons size classes ************/

.btn {
display: inline-block;
font-weight: 400;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border: none;
padding: 11px 16px 11px 16px;
font-size: 16px;
line-height: 1em;
border-radius: 8px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
outline: none;
transition-duration: 0.3s;
transition-property: transform;
-webkit-tap-highlight-color: transparent;
transform: translateZ(0);
}

.btn-small {
padding: 9px 16px 9px 16px;
font-size: 14px;
border-radius: 8px;
}

.btn-large {
padding: 15px 20px 15px 20px;
font-size: 20px;
border-radius: 10px;
}

/************ End buttons size classes *********/

/******* Button color classes **********/

.btn-green {
color: white;
background-color: #398232;
}
.btn-green:hover {
background-color: #2B6126;
}

.btn-gold {
color: #004987;
background-color: #FFB600;
}
.btn-gold:hover {
background-color: #E6A400;
}

.btn-gold-blue {
color: #004987;
background-color: #FFB600;
}
.btn-gold-blue:hover {
color: #ffffff;
background-color: #004987;
}

.btn-green-white {
color: white;
background-color: #398232;
}
.btn-green-white:hover {
color: #398232;
background-color: #ffffff;
}

.btn-gold-white {
color: #004987;
background-color: #FFB600;
}
.btn-gold-white:hover {
background-color: #FFFFFF;
}

.btn-blue-gold {
color: #ffffff;
background-color: #004987;
}
.btn-blue-gold:hover {
color: #004987;
background-color: #FFB600;
}

.btn-blue {
color: white;
background-color: #004987;
}
.btn-blue:hover {
background-color: #003A6C;
}

.btn-white {
color: #004987;
background-color: #ffffff;
}
.btn-white:hover {
background-color: #CCDBE7;
}

.btn-darkBlue-green {
color: #ffffff;
background-color: #041E42;
}
.btn-darkBlue-green:hover {
background-color: #47A23F;
}

.btn-green-darkBlue {
color: #ffffff;
background-color: #47A23F;
}
.btn-green-darkBlue:hover {
background-color: #041E42;
}

.btn-gray-gold {
color: #ffffff;
background-color: #63666A;
}
.btn-gray-gold:hover {
color: #101820;
background-color: #FFB600;
}

.btn-gold-gray {
color: #101820;
background-color: #FFB600;
}
.btn-gold-gray:hover {
color: #ffffff;
background-color: #63666A;
}

.btn-blue-darkBlue {
color: #ffffff;
background-color: #004987;
}
.btn-blue-darkBlue:hover {
background-color: #041E42;
}

.btn-darkBlue-blue {
color: #ffffff;
background-color: #041E42;
}
.btn-darkBlue-blue:hover {
background-color: #004987;
}

.btn-lightBlue-white {
color: #004987;
background-color: #71C5E8;
}
.btn-lightBlue-white:hover {
background-color: #ffffff;
}

.btn-gray {
color: #ffffff;
background-color: #63666A;
}
.btn-gray:hover {
background-color: #4F5255;
}

.btn-white-gray {
color: #63666A;
background-color: #ffffff;
}
.btn-white-gray:hover {
color: #004987;
background-color: #B1B3B5;
}

/******* End Button color classes **********/