:root {
--bg: #0f1724;
--accent1: #06b6d4;
--accent2: #7c3aed;
--accent3: #f59e0b;
--accent4: #10b981;
--light: #fff;
font-family: Inter, system-ui, sans-serif;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: radial-gradient(circle at top, #14213d, #000);
color: var(--light);
}
.wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.btn-3d {
background: none;
border: none;
perspective: 1000px;
cursor: pointer;
position: relative;
}
.inner {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
transform-style: preserve-3d;
transition: transform 0.4s cubic-bezier(0.18, 0.9, 0.32, 1), box-shadow 0.3s;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.btn-3d:hover .inner {
transform: rotateX(12deg) rotateY(-10deg) translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}
.btn-3d:active .inner {
transform: translateY(2px) scale(0.97);
}
.label {
font-weight: 600;
font-size: 16px;
color: var(--light);
}
svg {
width: 50px;
height: 50px;
fill: var(--light);
transition: transform 0.6s ease, fill 0.3s ease, filter 0.4s ease;
filter: drop-shadow(0 0 0 transparent);
}
/* Accent per knop */
.btn-1 .inner {
background: linear-gradient(145deg, #022c43, #053f5e);
}
.btn-2 .inner {
background: linear-gradient(145deg, #24104f, #3a0ca3);
}
.btn-3 .inner {
background: linear-gradient(145deg, #5a3d00, #f59e0b);
}
.btn-4 .inner {
background: linear-gradient(145deg, #004d40, #10b981);
}
.btn-1:hover svg {
transform: scale(1.3) rotate(10deg);
fill: #06b6d4;
filter: drop-shadow(0 0 10px #06b6d4);
}
.btn-2:hover svg {
transform: scale(1.3) rotate(10deg);
fill: #7c3aed;
filter: drop-shadow(0 0 10px #7c3aed);
}
.btn-3:hover svg {
transform: scale(1.3) rotate(10deg);
fill: #f59e0b;
filter: drop-shadow(0 0 10px #f59e0b);
}
.btn-4:hover svg {
transform: scale(1.3) rotate(10deg);
fill: #10b981;
filter: drop-shadow(0 0 10px #10b981);
}
/* animatie bij klik */
.pulse {
animation: pulse 0.5s ease, glow 0.5s ease;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
@keyframes glow {
0% {
filter: drop-shadow(0 0 0 transparent);
}
50% {
filter: drop-shadow(0 0 14px currentColor);
}
100% {
filter: drop-shadow(0 0 0 transparent);
}
}
