Syntec Style Guide
Buttons and Links
Primary Button
Label
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: 8px;
font-family: 'Open sans', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
padding: 15px 31px;
border-radius: 4px;
border-width: 1.5px;
border-style: solid;
transition: all .15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #2555aa;
border-color: #2555aa;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
background-color: #1c3387;
box-shadow: none;
}
.btn-primary:active,
.btn-primary.active {
background-color: #0e2a60;
}
.btn.icon-left {
flex-direction: row-reverse;
}
Primary Button Disabled
Label
.btn-primary:disabled {
color: #c0d3db;
background-color: #fafcff;
border-color: #fafcff;
cursor: default;
}
Secondary Button
Label
.btn-secondary {
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: .5rem;
font-family: 'Open sans', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
color: #2555aa;
background-color: #fff;
padding: 15px 31px
border-radius: 4px
border-width: 1.5px
border-style: solid;
border-color: #2555aa;
transition: all .15s ease-in-out;
}
.btn-secondary:hover {
color: #2555aa;
background-color: #fafcff;
border-color: #2555aa;
}
.btn-secondary:focus,
.btn-secondary.focus {
color: #2555aa;
background-color: #fafcff;
border-color: #33b6ff;
box-shadow: none;
}
.btn-secondary:active,
.btn-secondary.active {
color: #2555aa;
background-color: #fafcff;
border-color: #fafcff;
}
Secondary Button Disabled
Label
.btn-secondary:disabled {
color: #c0d3db;
background-color: #fafcff;
border-color: #fafcff;
cursor: default;
}
Tertiary Button
Label
.btn-tertiary {
display: inline-flex;
justify-content: center;
align-items: center;
column-gap: .5rem;
font-family: 'Open sans', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.2;
color: #2555aa;
background-color: #fff;
padding: 15px 31px
border-radius: 4px
border-width: 1.5px
border-style: solid;
border-color: #fff;
transition: all .15s ease-in-out;
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary.focus,
.btn-tertiary:active,
.btn-tertiary.active {
color: #2555aa;
background-color: #fafcff;
border-color: #fafcff;
}
Tertiary Button Disabled
Label
.btn-tertiary:disabled {
color: #c0d3db;
background-color: #fafcff;
border-color: #fafcff;
cursor: default;
}
link (Secondary CTA)
.secondaryCTA a {
color: #008ce6;
font-weight: 600;
font-style: light;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a, a:link, a:visited {
color: #008ce6;
font-weight: normal;
text-decoration: none;
-webkit-text-decoration-skip: objects;
}
a:hover {
font-weight: normal;
text-decoration: underline;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.right-arrow:after {
display: inline-block;
font-family: "Font Awesome 7 Free";
content: '\f105';
padding-left: 5px;
color: #002b64;
font-size: 16px;
}