CSS embossed circle button animation | HTML, CSS & JavaScript

<h1>
            Embossed Circle Buttons
        </h1>

<p>
            Hover and click the button to see the animation
        </p>

</div>

Press Effect

</div>

</button>

</div>

←

</button>

</div>

→

</button>

</div>

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

body {
    min-height: 100vh;
    background: #e3e7ed;
    font-family: Arial, sans-serif;
    color: #596579;
    justify-content: center;
    align-items: center;

padding: 30px;
}

/* =========================
   MAIN SHOWCASE
========================= */

.showcase {
    width: min(900px, 100%);
    min-height: 650px;

background: #e3e7ed;

border-radius: 35px;

box-shadow:
        18px 18px 40px #bbc3ce,
        -18px -18px 40px #ffffff;

display: flex;
    flex-direction: column;

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

padding: 50px;
}

/* =========================
   TITLE
========================= */

.title {
    text-align: center;
    margin-bottom: 45px;
}

.title h1 {
    font-size: 34px;
    margin-bottom: 10px;

text-shadow:
        2px 2px 3px #ffffff,
        -2px -2px 3px #aeb7c4;
}

.title p {
    color: #7c8796;
    font-size: 15px;
}

/* =========================
   EFFECT TITLE
========================= */

.effect-title {
    font-size: 20px;
    font-weight: bold;

margin-bottom: 35px;

text-shadow:
        1px 1px 2px #ffffff,
        -1px -1px 2px #aeb7c4;
}

/* =========================
   BUTTON STAGE
========================= */

.button-stage {

width: 320px;
    height: 320px;

border-radius: 50%;

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

box-shadow:
        inset 10px 10px 20px #c0c8d2,
        inset -10px -10px 20px #ffffff;
}

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

.demo-button {

width: 170px;
    height: 170px;

border: none;
    border-radius: 50%;

background: #e3e7ed;

color: #596579;

font-size: 48px;

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

position: relative;

cursor: pointer;

box-shadow:
        14px 14px 30px #b9c1cc,
        -14px -14px 30px #ffffff;

transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.demo-button span {

position: relative;

z-index: 5;

text-shadow:
        3px 3px 4px #b7bfca,
        -3px -3px 4px #ffffff;

transition: .3s ease;
}

/* =========================
   EFFECT 1
   PRESS
========================= */

.effect-1:active {

transform: scale(.88);

box-shadow:
        inset 10px 10px 18px #b9c1cc,
        inset -10px -10px 18px #ffffff;
}

.effect-1:active span {

transform: scale(.85);

}

/* =========================
   EFFECT 2
   LIFT
========================= */

.effect-2:hover {

transform: translateY(-15px);

box-shadow:
        20px 25px 40px #b9c1cc,
        -20px -20px 40px #ffffff;
}

.effect-2:hover span {

transform: scale(1.18);

}

.effect-2:active {

transform: translateY(-4px);

}

/* =========================
   EFFECT 3
   ROTATING RING
========================= */

.effect-3::before {

content: "";

position: absolute;

inset: -8px;

border-radius: 50%;

border: 4px solid transparent;

border-top-color: #596579;
    border-right-color: #596579;

opacity: 0;

}

.effect-3:hover::before {

opacity: 1;

animation:
        rotateRing 1s linear infinite;

}

@keyframes rotateRing {

from {
        transform: rotate(0deg);
    }

to {
        transform: rotate(360deg);
    }

}

.effect-3:hover {

transform: scale(1.06);

}

/* =========================
   EFFECT 4
   SHINE
========================= */

.effect-4 {

overflow: hidden;

}

.effect-4::before {

content: "";

position: absolute;

width: 50px;
    height: 240px;

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

transform:
        rotate(35deg)
        translateX(-200px);

transition: .8s;

}

.effect-4:hover::before {

transform:
        rotate(35deg)
        translateX(250px);

}

.effect-4:hover {

transform: scale(1.08);

}

/* =========================
   EFFECT 5
   3D PRESS
========================= */

.effect-5 {

box-shadow:

0 14px 0 #b7bfca,

15px 28px 35px
        rgba(0,0,0,.15),

-10px -10px 20px
        #ffffff;

}

.effect-5:hover {

transform: translateY(-7px);

box-shadow:

0 21px 0 #b7bfca,

18px 35px 40px
        rgba(0,0,0,.15),

-10px -10px 20px
        #ffffff;

}

.effect-5:active {

transform: translateY(10px);

box-shadow:

0 4px 0 #b7bfca,

6px 12px 18px
        rgba(0,0,0,.15),

-5px -5px 10px
        #ffffff;

}

/* =========================
   NAVIGATION
========================= */

.navigation {

display: flex;

align-items: center;

justify-content: center;

gap: 25px;

margin-top: 50px;

}

.nav-btn {

width: 55px;
    height: 55px;

border: none;

border-radius: 50%;

background: #e3e7ed;

color: #596579;

font-size: 22px;

cursor: pointer;

box-shadow:

7px 7px 14px #b9c1cc,

-7px -7px 14px #ffffff;

transition: .25s;

}

.nav-btn:hover {

transform: translateY(-4px);

}

.nav-btn:active {

transform: translateY(2px);

box-shadow:

inset 5px 5px 10px #b9c1cc,

inset -5px -5px 10px #ffffff;

}

.counter {

min-width: 80px;

text-align: center;

font-size: 18px;

font-weight: bold;

}

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

@media(max-width: 600px) {

body {
        padding: 15px;
    }

.showcase {

min-height: 600px;

padding: 30px 20px;

border-radius: 25px;

}

.title h1 {

font-size: 25px;

}

.button-stage {

width: 250px;
        height: 250px;

}

.demo-button {

width: 140px;
        height: 140px;

font-size: 40px;

}

/* =========================
   VERY SMALL SCREEN
========================= */

@media(max-width: 380px) {

.button-stage {

width: 220px;
        height: 220px;

}

.demo-button {

width: 125px;
        height: 125px;

}

.navigation {

margin-top: 35px;

}

const effects = [

{
        title: "Press Effect",
        icon: "✓"
    },

{
        title: "Lift Effect",
        icon: "↑"
    },

{
        title: "Rotating Ring",
        icon: "⚙"
    },

{
        title: "Shine Effect",
        icon: "→"
    },

{
        title: "3D Click",
        icon: "+"
    }

];

let index = 0;

/* =========================
   ELEMENTS
========================= */

const button =
    document.getElementById(
        "demoButton"
    );

const title =
    document.getElementById(
        "effectTitle"
    );

const icon =
    document.getElementById(
        "buttonIcon"
    );

const current =
    document.getElementById(
        "current"
    );

const prev =
    document.getElementById(
        "prevBtn"
    );

const next =
    document.getElementById(
        "nextBtn"
    );

/* =========================
   UPDATE BUTTON
========================= */

function updateEffect() {

const effect =
        effects[index];

title.textContent =
        effect.title;

icon.textContent =
        effect.icon;

current.textContent =
        String(index + 1)
        .padStart(2, "0");

button.className =
        "demo-button effect-" +
        (index + 1);

}

/* =========================
   NEXT
========================= */

next.addEventListener(
    "click",
    () => {

index++;

if (
            index >=
            effects.length
        ) {

index = 0;

}

updateEffect();

}
);

/* =========================
   PREVIOUS
========================= */

prev.addEventListener(
    "click",
    () => {

index--;

if (index < 0) {

index =
                effects.length - 1;

}

updateEffect();

}
);

/* =========================
   INITIAL
========================= */

updateEffect();

- CSS embossed circle button animation

Live Preview