Buttons
- Hodges, David
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
Default Button Style
Default State
Property | Value | Notes | |
|---|---|---|---|
| 1 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155093 |
| 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, https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159286301, 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 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 3 |
|
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
|
|
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 3 |
|
|
|
White Button Style
Default State
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155093 |
| 3 |
|
|
|
| 4 |
|
|
|
| 5 |
|
|
|
| 6 |
|
|
|
| 7 |
|
|
|
| 8 |
|
|
|
There is an ::after pseudo element with:
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, https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159220961 , for border-color if a gradient is not possible using the method described above.
Altered States - :hover, :focus, and :active
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159220961 |
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155465 |
| 3 |
|
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
|
|
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 3 |
|
|
|
Gray Button Style
Default State
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159253356 |
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155093 |
| 3 |
|
|
|
| 4 |
|
|
|
| 5 |
|
|
|
| 6 |
|
|
|
| 7 |
|
|
|
| 8 |
|
|
|
There is an ::after pseudo element with:
background-image: linear-gradient(40deg, #059bd6 6%, #253a6e 98%);View https://styleguide.asce.org/section-components.html#asgref-components-buttons for details.
Altered States - :hover, :focus, and :active
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
|
|
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 3 |
|
|
|
Altered State - :disabled
Property | Value | Note | |
|---|---|---|---|
| 1 |
|
|
|
| 2 |
|
| https://asce-dev.atlassian.net/wiki/spaces/STYLE/pages/159155362 |
| 3 |
|
|
|