riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

style for buttons

Browse source
This commit is contained in:
りき萌 2025-08-31 12:06:28 +02:00
parent 96fc77dc3e
commit 9e9d4dd75d
2 changed files with 35 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/css/base.css
View file

@ -40,6 +40,8 @@
:root { :root {
--transition-duration: 0.15s; --transition-duration: 0.15s;
--ease-out-quintic: cubic-bezier(0.17, 0.84, 0.44, 1);
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

33
static/css/main.css
View file

@ -415,6 +415,39 @@ hr {
margin-bottom: 2em; margin-bottom: 2em;
} }
/* Buttons */
button {
padding: 0.2rem 1.2rem;
border: 1px solid var(--border-2);
background-color: color-mix(in oklab, var(--background-color), white 25%);
color: var(--text-color);
box-shadow: 0 1px 2px var(--border-1);
border-radius: 100px;
transition:
background-color var(--transition-duration) var(--ease-out-quintic),
box-shadow var(--transition-duration) var(--ease-out-quintic),
transform var(--transition-duration) var(--ease-out-quintic);
&:hover {
box-shadow: 0 4px 6px var(--border-1);
transform: translateY(-2px);
}
&:active {
background-color: color-mix(
in oklab,
var(--background-color),
var(--shading-base) 5%
);
box-shadow: 0 0 2px var(--border-1);
transform: translateY(0);
}
}
/* Style the noscript box a little more prettily. */ /* Style the noscript box a little more prettily. */
.noscript { .noscript {