| Table of Contents | ||||
|---|---|---|---|---|
|
Default Button Style
Property | Value | Notes | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
| |
| 4 |
|
| |
| 5 |
|
| |
| 6 |
|
| |
| 7 |
|
| |
| 8 |
|
|
...
Use the color #0273ba, Blue, for border-color if a gradient is not possible using the method described above.
Altered States - :hover, :focus, and :active
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|
White Button Style
Default State
...
Property | Value |
|---|
...
Note |
|---|
...
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
| |
| 4 |
|
| |
| 5 |
|
| |
| 6 |
|
| |
| 7 |
|
| |
| 8 |
|
|
There is an ::after pseudo element with:
| Code Block | ||
|---|---|---|
| ||
background-image: linear-gradient(40deg, #9fd64d 6%, #9fd64d 98% ); /* primary-color(green) */ margin: 0; border-radius: inherit; transition: 0.15s ease-in-out; z-index: -1; } } } |
Altered States
| Code Block | ||
|---|---|---|
| ||
.btn,
.button {
&.-white {
&:active,
&:hover,
&:focus,
&.-focused {
background-image: linear-gradient(40deg,
#9fd64d 6%,
#9fd64d 98%
); /* primary-color(green) */
color: #012a52; /* primary-color(blue, shade2) */
outline: 0;
margin: 0;
background-color: transparent;
}
}
} |
View https://styleguide.asce.org/section-components.html#asgref-components-buttons for details.
Use the color #9fd64d, Green , for border-color if a gradient is not possible using the method described above.
Altered States - :hover, :focus, and :active
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|