studio-variable/world-game
3
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

style button and earth icon variant
All checks were successful
Deploy / Deploy to Production (push) Successful in 16s
Details

Browse source
This commit is contained in:
isUnknown 2026-03-09 11:57:28 +01:00
parent 802a3ed5bf
commit c41eec0385
4 changed files with 74 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/styles/buttons.css
View file

@ -2,48 +2,51 @@
.button {
width: 14vmax;
min-width: 130px;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
position: sticky;
z-index: var(--z-base);
padding: 12px 16px;
transition: 0.5s ease-out;
font-family: "Danzza Bold";
background-color: var(--color-primary);
border: none;
cursor: pointer;
font-family: "Danzza Bold";
font-size: var(--font-size-button);
text-transform: uppercase;
color: #000;
background: linear-gradient(270deg, var(--color-primary) 50%, transparent 0)
100%;
background-size: 201% 100%;
outline: 2px solid #04fea0;
}
.button:hover {
background-position: left;
background-color: transparent;
outline: solid 2px var(--color-primary);
background-color: initial;
background-position: 0;
outline: 2px solid #04fea0;
color: var(--color-primary);
}
.button p {
color: black;
margin: 0;
transition: color 0.3s;
.button:hover::before {
filter: invert(84%) sepia(30%) saturate(1700%) hue-rotate(87deg)
brightness(100%) contrast(99%);
}
.button:hover p {
color: var(--color-primary) !important;
}
.earth-icon {
width: 24px;
height: 24px;
background-image: url('/assets/img/icon-earth-green.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
transition: filter 0.3s;
.button.earth-icon::before {
content: "";
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAYAAADFniADAAACmUlEQVRYhe2YsWtUQRDGf1ETNAlJhIgRop4gGqyCoI0IekUKbSJaaRNBxErwP0hnIxhbq7MRLYRYaJEiKMHCFMFGURAMGlBRMBElEGOUlW9lbtm3d/d4gRPvg8c+5s3OzO3Mfrtz5MAk8KuBZ7JRFxvyRLXeaKth/yxwOJB9B34EskvAduAVcCf41g50BbJZ4Hbe31aJpGk0oveM7FSNRmxUUk43ZcgG9e7SuwRsBLrz/a4qfAN+ym5JHxaAVasUqykX0Bs900AfcLSAgJCdPtn1PgZDpaYsdJs+V9QjQZouAMeANeC8ZHMN+pgzcy9rIfaa79eU1qlY8U8kuGe+huNUoVvMJ3xMeL1YoTuFt3rv13buAIYTzrZo7K2h16HR0cpnve9KUZNfqUUji1FCEY+lhMVwpZq20H0dPAdORdja4RNwMWHnunjHMfXVhN5NYFsgOyfWP2Rr0qdjPGKksk6FHmP0cR9LU6avFVS9aFMeHT4CH4J5jkO2qvhfJGzuBzYDX3WeZeGAivqL4UKPAV1/qoJqGlhGdxe0l0FgB4GdwLLOpiwcB3q00k8TeiNi/3eRM3RIK/4HLUqoB62g6oUr9PvSbdcl323/B8H8zoyGwaNX444aep0R2Un5dpfLx+HH1tUlhdjNs8dQQL/G98CJhJ27wD7gEXAlofdQKT6ju7/3V4VYUI7ldweyFXFRFpYlX6qht6KxK9I1/4UNyl3QbqngTkv2BHitbmZMsunIuZWCOz/LZq7vZo5Idk/dzGzKSMkUpA9kuKC23TcVY0ZWCif8M+Tpevs9esrasjMF+ZuRvbLxsRAqxQp91ey+NUOMRaDb2M085GNBWUwFZIq6jrDhHNA4FLltOLa+EciSRZ0H/+Hfi8Bv133zgtDiJQYAAAAASUVORK5CYII=");
background-size: 100%;
width: 1.125rem;
height: 1.125rem;
transform: translateX(-0.5rem);
transition: all 0.5s ease-out;
}
.button:hover .earth-icon {
filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%) hue-rotate(91deg) brightness(101%) contrast(97%);
filter: brightness(0) saturate(100%) invert(77%) sepia(82%) saturate(507%)
hue-rotate(91deg) brightness(101%) contrast(97%);
}
/* Clickable elements */