Default Style
Property | Value | Notes | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
| |
| 4 |
|
| |
| 5 |
|
| |
| 6 |
|
| |
| 7 |
|
| |
| 8 |
|
|
There is an ::after pseudo element with:
background-image: linear-gradient(40deg, #059bd6 6%, #253a6e 98%);
that creates the gradient border effect. View https://styleguide.asce.org/section-components.html#asgref-components-buttons for details.
Use the color #0273ba, Blue, for border-color if a gradient is not possible using the method described above.
States - :hover, :focus, and :active
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|
State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|
White Style
Default State
.btn, .button {
&.-white {
cursor: pointer;
display: inline-block;
position: relative;
background-color: #fff; /* primary-color(white) */
background-clip: padding-box;
color: #1a1a1a; /* primary-color(black) */
font-family: "Mulish", "Helvetica Neue", Helvetica, sans-serif; /* $mulish */
font-size: 18px;
font-size: 1.125rem;
line-height: 24px;
line-height: 1.5rem;
font-weight: 800;
text-align: center;
text-decoration: none;
padding: 15px 35px;
border: solid 2px transparent;
border-radius: 30px;
transition: ease-in-out 0.15s, background-color 0.3s ease, color 0.1s ease;
box-sizing: border-box;
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(40deg, #9fd64d 6%, #9fd64d 98%);
margin: 0;
border-radius: inherit;
transition: 0.15s ease-in-out;
z-index: -1;
}
}
}
Altered States
.btn, .button {
&.-white {
&:active, &:hover, &:focus, &.-focused {
background-image: linear-gradient(40deg, #9fd64d 6%, #9fd64d 98%);
color: #012a52;
outline: 0;
margin: 0;
background-color: transparent;
}
}
}