Primary button
font-family: "Montserrat", Arial, sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: .1em;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
-webkit-font-smoothing: subpixel-antialiased;
color: rgba(255, 255, 255, 1);
background: rgba(22, 34, 76, 1);
border: none;
margin: 10px 0;
height: 50px;
border-radius: 4px;
-webkit-transition: all ease-out 150ms;
-moz-transition: all ease-out 150ms;
transition: all ease-out 150ms;
:Hover
background: rgba(10, 71, 115, 1);
box-shadow: none;
Secondary Button
font-family: "Montserrat", Arial, sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: .1em;
font-size: 12px;
line-height: 16px;
text-transform: uppercase;
-webkit-font-smoothing: subpixel-antialiased;
color: rgba(22, 34, 76, 1);
background: rgba(10, 71, 115, 0);
border: none;
margin: 10px 0;
height: 50px;
box-shadow: 0 0 0 1.5px rgba(22, 34, 76, 1) inset;
:Hover
background: rgba(0, 0, 0, .075);
box-shadow: 0 0 0 1px rgba(22, 34, 76, 0) inset;
Plain Text Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
margin: 0 0 11px;
padding: 0;
font-family: "Montserrat", Arial, sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: 0em;
font-size: 15px;
line-height: 22px;
color: rgba(54, 156, 241, 1);
-webkit-font-smoothing: antialiased;
text-decoration: none;
:Hover
text-decoration: underline;
Small Text Link w/ Arrow
Learn More
margin: 0;
padding: 5px 0;
font-family: "Montserrat", Arial, sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: .1em;
font-size: 13px;
line-height: 20px;
text-transform: uppercase;
color: rgba(54, 156, 241, 1);
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: none;
cursor: pointer;
position: relative;
:After
content: '';
position: absolute;
right: -20px;
top: 8px;
width: 20px;
height: 10px;
opacity: 0;
background: url(../img/arrow.svg) no-repeat;
background-size: contain;
-webkit-transition: all linear 80ms;
-moz-transition: all linear 80ms;
transition: all linear 80ms;
:Hover:After
opacity: 1;
transform: translateX(6px);
-webkit-transition: all linear 120ms;
-moz-transition: all linear 120ms;
transition: all linear 120ms;
Small Text Link
Learn More
margin: 0;
font-family: "Montserrat", Arial, sans-serif;
font-style: normal;
font-weight: 600;
letter-spacing: .1em;
font-size: 13px;
line-height: 20px;
text-transform: uppercase;
color: rgba(54, 156, 241, 1);
-webkit-font-smoothing: subpixel-antialiased;
text-decoration: none;
cursor: pointer;
padding: 9px 15px 11px;
position: relative;
display: inline-block;
border-radius: 4px;
background: rgba(0, 0, 0, 0);
-webkit-transition: all linear 80ms;
-moz-transition: all linear 80ms;
transition: all linear 80ms;
:Hover
background: rgba(0, 0, 0, .075);
color: rgba(22, 33, 76, 1);
-webkit-transition: all linear 120ms;
-moz-transition: all linear 120ms;
transition: all linear 120ms;