| Note |
|---|
Warning: Styling mentioned on this page is limited. Please refer to https://styleguide.asce.org/section-components.html#asgref-components-buttons for a more comprehensive representation. |
Contents
| Table of Contents | ||||
|---|---|---|---|---|
|
...
|
Default Button Style
Default State
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 | ||
|---|---|---|
| ||
.btn.-white, .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; } .btn.-white::before, .button.-white::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(40deg, #9fd64d 6%, #9fd64d 98%); |
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 |
|
|
...
Gray 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 #059bd6 6%, #9fd64d#253a6e 98%); margin: 0; border-radius: inherit; transition: 0.15s ease-in-out; z-index: -1; } |
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.
Altered States - :hover, :focus, and :active
Property |
|---|
...
Value |
|---|
...
Note |
|---|
...
| 1 |
|
|
...
| |||
| 2 |
|
| |
| 3 |
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| |
| 2 |
|
| |
| 3 |
|
|