updated button styling for different states

This commit is contained in:
Peter Morton 2023-06-25 19:45:32 -05:00
parent b2d94cef31
commit 1124aa1b64

View File

@ -109,3 +109,74 @@ button {
text-rendering: auto;
align-items: flex-start;
}
/* button {
border: 1px solid #888;
color: var(--font-black);
border-radius: 3px;
background-color: #eeeeee;
background-image: -moz-linear-gradient(100% 100% 90deg, #dfdfdf, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#dfdfdf));
background-image: -webkit-linear-gradient(#ffffff, #dfdfdf);
background-image: -o-linear-gradient(#ffffff, #dfdfdf);
background-image: linear-gradient(to bottom, #ffffff 1%, #dfdfdf 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
} */
button:hover {
background-color: #eeeeee;
border-color: #007aff;
color: var(--font-black);
box-shadow: 0 1px 1px #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
button:active,
button:active:hover {
border-color: #007aff;
background-color: #d5d5d5;
color: #007aff;
box-shadow: 1px 0 1px #ddd;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
}
button[disabled],
button[disabled]:hover,
button[disabled]:active {
background-image: none;
border-style: dashed;
background-color: transparent;
color: #666;
border-color: #666;
box-shadow: none;
}
button:focus {
background-color: #eeeeee;
}
.themeLinkStyle {
color: #007aff;
}
.themeLinkStyle:link,
.themeLinkStyle:visited {
color: #007aff;
}
.themeLinkStyle:hover,
.themeLinkStyle:focus {
color: #ffffff;
}
.themeLinkStyle:active,
.themeLinkStyle:active:hover {
background-color: #d5d5d5;
}
.transparentButtonStyle {
background-color: transparent;
border: 1px solid transparent;
}
.transparentButtonStyle:hover {
background-color: transparent;
border-color: transparent;
}
.transparentButtonStyle:active {
background-color: transparent;
}
.transparentButtonStyle[disabled] {
opacity: 0.6;
cursor: default;
}