HTML
<button class="primary-button" type="button" >button</button>
CSS
button{
padding: 12px 35px;
font-size: 14px;
border: 1px solid #8d8d8d;
}
button.primary-button
{
border: 1px solid #02083C;
background: #02083C;
color: #fff;
}
button.primary-button:hover
{
border: 1px solid #282D59;
background: #282D59;
color: #fff;
}
button{
padding: 12px 35px;
font-size: 14px;
border: 1px solid #8d8d8d;
}
button.secondary-button
{
border: 1px solid #00FFFF;
background: #00FFFF;
color: #02083C;
}
button.secondary-button:hover
{
border: 1px solid #282D59;
background: #282D59;
color: #fff;
}
button{
padding: 12px 35px;
font-size: 14px;
border: 1px solid #8d8d8d;
}
button.disabled-button {
background: #F0F0F0;
border-color: #F0F0F0;
box-shadow: none;
color: #8d8d8d;
cursor: not-allowed;
}
button{
padding: 12px 35px;
font-size: 14px;
border: 1px solid #8d8d8d;
}
button.tertiary-button
{
border: 1px solid #02083C;
background: transparent;
color: #02083C;
}
button.tertiary-button:hover
{
border: 1px solid #02083C;
background: #02083C;
color: #fff;
}
button{
padding: 12px 35px;
font-size: 14px;
border: 1px solid #8d8d8d;
}
button.danger-button
{
border: 1px solid #DC3546;
background: #DC3546;
color: #fff;
}
button.danger-button:hover
{
border: 1px solid #FF5051;
background: #FF5051;
color: #fff;
}
button[name=sm-button]
{
padding: 5px 35px;
height: 32px;
}
button[name=md-button]
{
padding: 8px 35px;
height: 40px;
}
button[name=lg-button]
{
padding: 8px 35px;
height: 48px;
}
Modifiers
size

Typography

When a user hovers overs a breadcrumb, the breadcrumb link should be underlined.

Element Font-size (px/rem) Font-weight Margin-Left Height
Link 18 / 1.125 Regular / 400 10px / 0.625 32 / 2