Page Comparison

Versions Compared

Key

This line was added.
This line was removed.
Formatting was changed.

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.

Table of Contents

minLevel	1
maxLevel	7

...

	Property	Value	Note
1	`background-image`	`linear-gradient(40deg, #9fd64d 6%, #9fd64d 98%)`	Green
2	`color`	`#012a52`	Blue shade 2
3	`background-color`	`transparent`

Altered State - `:disabled`

	Property	Value	Note
1	`background`	`rgb(148, 148, 148)`
2	`color`	`rgb(255, 255, 255)`	White
3	`border-color`	`rgb(148, 148, 148)`

Gray Button Style

Default State

	Property	Value	Note
1	`background-color`	`#edeff1`	Gray
2	`color`	`#1a1a1a`	Black
3	`font-size`	`1.125rem`
4	`font-weight`	`800`
5	`text-align`	`center`
6	`padding`	`15px 35px`
7	`border`	`solid 2px transparent`
8	`border-radius`	`30px`

There is an ::after pseudo element with:

Code Block

language	css

background-image: linear-gradient(40deg, #059bd6 6%, #253a6e 98%);

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	`background-image`	`linear-gradient(40deg, #253a6e 6%, #059bd6 98%)`
2	`color`	`#ffffff`	White
3	`background-color`	`transparent`

Altered State - `:disabled`

	Property	Value	Note
1	`background`	`rgb(148, 148, 148)`
2	`color`	`rgb(255, 255, 255)`	White
3	`border-color`	`rgb(148, 148, 148)`