Drag and drop component
Book a demo
Blog post image for EandoX
banking app — Loan calculator
Banking app — Transaction history
Sankey diagram for eandox
Dashboard for prodikt
Coliba — Logo design
The book talk series — Logo design
Home
Sandbox
.glowing-wrapper-glow-outer {
position: absolute;
top: -8px;
left: -8px;
width: calc(100% + 16px);
height: calc(100% + 16px);
border-radius: 999px;
background: radial-gradient(
85% 120% at 50% 120%,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
z-index: 0; /* Keep it behind the button */
}
/* Make glow appear when hovering the button */
.glowing-wrapper-button:hover ~ .glowing-wrapper-glow-outer {
opacity: 0.8;
}
.glowing-wrapper-button {
box-shadow:
rgba(0, 0, 0, 0.4) 0px 4px 3px -1px, /* drop shadow */
rgba(255, 255, 255, 0.22) 0px 1px 1px 0px inset; /* inner light */
}
/* Ensure predictable stacking inside the wrapper */
.glowing-wrapper { position: relative; }
.glowing-wrapper-animations,
.glowing-wrapper-borders-masker,
.glowing-wrapper-glow-outer { z-index: 0; }
/* --- Button depth (drop + inner shadows) --- */
.glowing-wrapper-button {
position: relative; /* create a stacking context */
z-index: 1; /* above the animation layers */
border: 1.5px solid #000;
border-radius: 50px;
background-color: rgb(44,44,44);
/* DROP SHADOW (like your .link-block) */
box-shadow: rgba(0,0,0,0.4) 0px 4px 3px -1px;
}
/* INNER SHADOW / TOP HIGHLIGHT lives on a pseudo-element so it won't hit icons */
.glowing-wrapper-button::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
/* INNER LIGHT (same as .link-block) */
box-shadow: rgba(255,255,255,0.22) 0px 1px 1px 0px inset;
}
/* Hover state to match your second button */
.glowing-wrapper-button:hover {
background-color: rgb(73,73,73);
box-shadow: rgba(0,0,0,0.2) 0px 4px 3px -1px;
}
.glowing-wrapper-button:hover::before {
box-shadow: rgba(255,255,255,0.22) 0px 1px 0px 0px inset;
}