File size: 1,022 Bytes
f63d934 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
.button {
position: relative;
font-size: 1rem;
padding: 0.5em;
border: none;
background: none;
border-radius: 3em;
margin: 0.1em;
background-color: var(--lighter-grey);
cursor: pointer;
font-family: var(--font-1);
flex: 1 1 18%;
min-width: 7em;
box-shadow: -0.1em 0.1em 0.1em var(--lightest-grey);
transition: color 0.2s ease, background-color 0.2s ease;
}
.button[disabled] {
background-color: var(--lightest-grey);
color: var(--lighter-grey);
}
.button--selected-true {
background-color: var(--light-grey);
color: white;
box-shadow: -0.1em 0.1em 0.1em var(--blue);
}
.button:not([disabled]):hover,
.button:focus {
outline: none;
background-color: var(--light-grey);
color: white;
}
.button::after,
.button::after {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-radius: 3em;
box-shadow: -var(--small) var(--small) var(--medium) var(--blue);
opacity: 0;
transition: opacity 0.2s ease;
}
.button:hover::after,
.button:focus::after {
opacity: 1;
}
|