wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: add new button style, update nav

Browse source
This commit is contained in:
Devin Haska 2024-11-11 17:05:09 -08:00
parent 4b58c53060
commit 72b80f7e8f
14 changed files with 132 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/css/blocks/button.css
View file

@ -1,35 +1,90 @@
.button {
display: flex;
align-items: center;
justify-content: center;
line-height: 1rem;
background-color: var(--color-white);
color: var(--color-shadow);
box-shadow:
1px 1px 0px var(--color-shadow),
2px 2px 0 var(--color-shadow);
padding-block: var(--spacing-0\.25);
padding-inline: var(--spacing-0\.5);
border-radius: var(--spacing-0\.25);
border: 1px solid var(--color-shadow);
color: var(--color-text);
display: inline-flex;
gap: var(--spacing-0\.5);
padding: var(--spacing-0\.5) var(--spacing-1);
position: relative;
text-decoration: none;
font-size: 0.8rem;
transition:
box-shadow var(--transition-duration),
transform var(--transition-duration),
background-color var(--transition-duration),
color var(--transition-duration);
transition: transform 0.3s ease;
z-index: 1;
&::before,
&::after {
border-radius: var(--spacing-0\.5);
position: absolute;
inset: 0;
content: "";
transition:
opacity 0.1s ease,
transform 0.3s var(--transition-bounce);
z-index: -1;
}
&::before {
background-color: var(--color-surface);
}
&::after {
background-color: var(--color-text);
opacity: 0;
}
svg {
color: var(--color-fadeText);
transform: scale(1);
transition: transform 0.3s var(--transition-bounce);
}
}
.button:hover {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
@media (hover: hover) {
.button:hover {
&::before,
&::after {
transform: scale(1.05);
}
&::after {
opacity: 1;
}
svg {
color: var(--color-border);
transform: rotateZ(12deg) scale(1.4);
}
}
}
.button:active {
box-shadow: 0 0 0 var(--color-shadow);
transform: translate(2px, 2px);
transform: scale(0.8);
}
.button--alt {
color: var(--color-primary);
&::before {
background-color: var(--color-white);
}
&::after {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
}
svg {
color: inherit;
}
}
@media (hover: hover) {
.button--alt:hover {
color: var(--color-shadow);
svg {
color: inherit;
}
}
}