Page Comparison

Contents

Default Button Style

Default State

...

Altered States - :hover, :focus, and :active

Altered State - :disabled

...

White Button Style

Default State

...

...

	Property	Value	Note
1	background-color	#ffffff	White
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, #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

Altered State - :disabled

...

Gray Button Style

Default State

There is an ::after pseudo element with:

background-image: linear-gradient(40deg, 
                #9fd64d  #059bd6 6%, 
                #9fd64d 98%
            ); /* primary-color(green) */
            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%
            ); /* primary-color(green) */
            color: #012a52; /* primary-color(blue, shade2) */
            outline: 0;
            margin: 0;
            background-color: transparent;
        }
    }
}#253a6e 98%);

View https://styleguide.asce.org/section-components.html#asgref-components-buttons for details.

Altered States - :hover, :focus, and :active

Altered State - :disabled