Embossed CSS Button animation | HTML, CSS & JavaScript

<h2>
                CYAN PULSE
            </h2>

<p>
                Electric glow + embossed depth
            </p>

</div>

<span class="button-label">
                    START
                </span>

</span>

</button>

</div>

</section>

<h2>
                PURPLE ORBIT
            </h2>

<p>
                Rotating energy ring animation
            </p>

</div>

<span class="button-label">
                    FUTURE
                </span>

</span>

</button>

</div>

</section>

<h2>
                RED ENERGY
            </h2>

<p>
                Fast electric rotation effect
            </p>

</div>

<span class="button-label">
                    POWER
                </span>

</span>

</button>

</div>

</section>

<h2>
                MATRIX GREEN
            </h2>

<p>
                Cyber-style neon interaction
            </p>

</div>

<span class="button-label">
                    ENTER
                </span>

</span>

</button>

</div>

</section>

<h2>
                RGB ELECTRIC
            </h2>

<p>
                Multi-color futuristic animation
            </p>

</div>

<span class="button-label">
                    CREATE
                </span>

</span>

</button>

</div>

</section>

</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

font-family:
        Inter,
        Arial,
        sans-serif;

color: #fff;

background:
        radial-gradient(
            circle at 50% 0%,
            #172235,
            #080b11 55%,
            #05070b
        );

overflow-x: hidden;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.header {
    min-height: 100vh;

display: flex;
    justify-content: center;
    align-items: center;

text-align: center;

position: relative;
}

.header-content {
    animation: headerReveal 1.2s ease forwards;
}

.header h1 {
    font-size: clamp(38px, 7vw, 85px);
    font-weight: 900;

letter-spacing: -3px;

background:
        linear-gradient(
            90deg,
            #fff,
            #00eaff,
            #fff
        );

background-size: 200%;

-webkit-background-clip: text;
    color: transparent;

animation: textShine 4s linear infinite;
}

.header p {
    margin-top: 20px;

color: #8290a5;

font-size: 17px;
    letter-spacing: 2px;
}

.scroll-down {
    position: absolute;

bottom: 45px;
    left: 50%;

transform: translateX(-50%);

color: #64748b;

font-size: 12px;
    letter-spacing: 3px;

animation: scrollBounce 2s infinite;
}

@keyframes headerReveal {

from {
        opacity: 0;
        transform: translateY(40px);
    }

to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes textShine {

to {
        background-position: 200%;
    }

}

@keyframes scrollBounce {

0%, 100% {
        transform: translate(-50%, 0);
    }

50% {
        transform: translate(-50%, 10px);
    }

}

/* =========================================================
   BUTTON SECTIONS
========================================================= */

.buttons-container {
    width: min(1100px, 92%);
    margin: auto;
}

.button-section {

min-height: 100vh;

display: flex;

justify-content: center;
    align-items: center;

position: relative;

border-top: 1px solid rgba(255,255,255,.04);

opacity: 0;

transform: translateY(100px) scale(.92);

transition:
        opacity 1s cubic-bezier(.2,.8,.2,1),
        transform 1s cubic-bezier(.2,.8,.2,1);
}

.button-section.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   SECTION NUMBER
========================================================= */

.number {
    position: absolute;

top: 50%;
    left: 0;

transform: translateY(-50%);

font-size: clamp(70px, 15vw, 180px);

font-weight: 900;

color: rgba(255,255,255,.025);

user-select: none;
}

/* =========================================================
   BUTTON WRAPPER
========================================================= */

.button-wrap {

display: flex;

flex-direction: column;

align-items: center;

gap: 45px;

}

.button-title {

text-align: center;
}

.button-title h2 {

font-size: 26px;

letter-spacing: 2px;

}

.button-title p {

margin-top: 8px;

color: #68778c;

font-size: 13px;

letter-spacing: 1px;

}

/* =========================================================
   COMMON CIRCLE BUTTON
========================================================= */

.circle-button {

width: 230px;
    height: 230px;

position: relative;

border: 0;

border-radius: 50%;

background: transparent;

cursor: pointer;

transition:
        transform .45s cubic-bezier(.2,.8,.2,1);

filter:
        drop-shadow(
            0 25px 35px rgba(0,0,0,.55)
        );
}

.circle-button:hover {

transform:
        translateY(-12px)
        scale(1.04);

}

.circle-button:active {

transform:
        translateY(-2px)
        scale(.96);

}

/* =========================================================
   INNER CIRCLE
========================================================= */

.circle-button::before {

content: "";

position: absolute;

inset: 0;

border-radius: 50%;

background:
        conic-gradient(
            from 0deg,
            transparent,
            var(--accent),
            #fff,
            var(--accent),
            transparent 25%,
            transparent
        );

animation:
        electricRotate 3s linear infinite;

filter:
        drop-shadow(
            0 0 6px var(--accent)
        )
        drop-shadow(
            0 0 18px var(--accent)
        );

}

/* =========================================================
   EMBOSSED SURFACE
========================================================= */

.circle-button::after {

content: "";

position: absolute;

inset: 8px;

border-radius: 50%;

background:
        linear-gradient(
            145deg,
            var(--surface-light),
            var(--surface-dark)
        );

box-shadow:

inset
        10px 10px 18px
        rgba(255,255,255,.12),

inset
        -12px -12px 20px
        rgba(0,0,0,.9),

0 0 20px
        rgba(0,0,0,.4);

}

/* =========================================================
   BUTTON CONTENT
========================================================= */

.button-content {

position: absolute;

inset: 0;

z-index: 5;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 10px;

}

.icon {

width: 45px;
    height: 45px;

border-radius: 50%;

display: grid;
    place-items: center;

font-size: 20px;

color: #fff;

border: 1px solid
        rgba(255,255,255,.18);

background:
        rgba(255,255,255,.04);

box-shadow:
        inset 3px 3px 7px rgba(255,255,255,.1),
        inset -3px -3px 7px rgba(0,0,0,.7),

0 0 15px
        var(--accent);

}

.button-label {

font-size: 15px;

font-weight: 800;

letter-spacing: 3px;

color: #fff;

text-shadow:
        0 0 8px var(--accent),
        0 0 18px var(--accent);

}

/* =========================================================
   ROTATING ORBIT
========================================================= */

.orbit {

position: absolute;

inset: -18px;

border-radius: 50%;

border:
        1px dashed
        color-mix(
            in srgb,
            var(--accent) 65%,
            transparent
        );

animation:
        orbitRotate 8s linear infinite;

opacity: .7;

}

.orbit::before {

content: "";

position: absolute;

width: 10px;
    height: 10px;

border-radius: 50%;

background: var(--accent);

box-shadow:
        0 0 8px var(--accent),
        0 0 20px var(--accent);

top: 5px;
    left: 50%;

transform: translateX(-50%);

}

/* =========================================================
   RIPPLE
========================================================= */

.ripple {

position: absolute;

width: 10px;
    height: 10px;

border-radius: 50%;

background: var(--accent);

pointer-events: none;

z-index: 10;

transform: translate(-50%, -50%);

animation:
        ripple .7s ease-out forwards;

}

@keyframes ripple {

from {
        width: 10px;
        height: 10px;
        opacity: .8;
    }

to {
        width: 350px;
        height: 350px;
        opacity: 0;
    }

}

@keyframes electricRotate {

to {
        transform: rotate(360deg);
    }

}

@keyframes orbitRotate {

to {
        transform: rotate(360deg);
    }

}

/* =========================================================
   BUTTON 1 — CYAN
========================================================= */

.button-1 {

--accent: #00eaff;

--surface-light: #263b48;

--surface-dark: #071118;

}

.button-1 .icon {

animation:
        cyanPulse 2s infinite;

}

@keyframes cyanPulse {

0%, 100% {
        box-shadow:
            inset 3px 3px 7px rgba(255,255,255,.1),
            inset -3px -3px 7px #000,
            0 0 10px #00eaff;
    }

50% {
        box-shadow:
            inset 3px 3px 7px rgba(255,255,255,.1),
            inset -3px -3px 7px #000,
            0 0 30px #00eaff;
    }

}

/* =========================================================
   BUTTON 2 — PURPLE
========================================================= */

.button-2 {

--accent: #a855f7;

--surface-light: #3b2850;

--surface-dark: #12091b;

}

.button-2::before {

animation:
        electricRotate 1.8s linear infinite;

}

.button-2 .orbit {

animation-duration: 5s;

}

/* =========================================================
   BUTTON 3 — RED
========================================================= */

.button-3 {

--accent: #ff3158;

--surface-light: #512532;

--surface-dark: #18080e;

}

.button-3::before {

animation:
        electricRotate 1.3s linear infinite;

}

.button-3:hover {

filter:
        drop-shadow(0 20px 35px rgba(255,49,88,.25));

}

/* =========================================================
   BUTTON 4 — GREEN
========================================================= */

.button-4 {

--accent: #00ff88;

--surface-light: #234638;

--surface-dark: #06130d;

}

.button-4 .orbit {

inset: -30px;

border-style: solid;

opacity: .25;

animation-duration: 12s;

}

/* =========================================================
   BUTTON 5 — RGB
========================================================= */

.button-5 {

--accent: #00eaff;

--surface-light: #303747;

--surface-dark: #090c13;

}

.button-5::before {

background:
        conic-gradient(
            #00eaff,
            #a855f7,
            #ff3158,
            #00ff88,
            #00eaff
        );

animation:
        electricRotate 2s linear infinite;

}

.button-5 .orbit {

border-color: #a855f7;

animation:
        orbitRotate 4s linear infinite;

}

/* =========================================================
   FOOTER
========================================================= */

.footer {

padding: 100px 20px;

text-align: center;

color: #4b5563;

border-top:
        1px solid rgba(255,255,255,.05);

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width: 600px) {

.circle-button {

width: 190px;
        height: 190px;

}

.number {

left: 50%;

transform:
            translate(-50%, -50%);

}

.button-section {

min-height: 85vh;

}

const sections =
    document.querySelectorAll(
        ".button-section"
    );

const observer =
    new IntersectionObserver(

entries => {

entries.forEach(entry => {

if (
                    entry.isIntersecting
                ) {

entry.target.classList.add(
                        "show"
                    );

}

});

},

{
            threshold: .25
        }

);

sections.forEach(section => {

observer.observe(section);

});

/* =========================================================
   RIPPLE CLICK
========================================================= */

function createRipple(event, button) {

const ripple =
        document.createElement("span");

ripple.className = "ripple";

const rect =
        button.getBoundingClientRect();

ripple.style.left =
        (event.clientX - rect.left) + "px";

ripple.style.top =
        (event.clientY - rect.top) + "px";

button.appendChild(ripple);

setTimeout(() => {

ripple.remove();

}, 700);

}

/* =========================================================
   MOUSE MAGNETIC EFFECT
========================================================= */

document
    .querySelectorAll(".circle-button")
    .forEach(button => {

button.addEventListener(
            "mousemove",
            event => {

const rect =
                    button.getBoundingClientRect();

const x =
                    event.clientX -
                    rect.left -
                    rect.width / 2;

const y =
                    event.clientY -
                    rect.top -
                    rect.height / 2;

button.style.transform =
                    `
                    translate(
                        ${x * .08}px,
                        ${y * .08 - 8}px
                    )
                    scale(1.04)
                    `;

}
        );

button.addEventListener(
            "mouseleave",
            () => {

button.style.transform = "";

}
        );

});

- Embossed CSS Button animation

Live Preview