27 CSS Button Hover Effects 02 / 27

Modern 3D Skeuomorphic Button Press Effects

Tangible buttons that lift on hover and sink on :active — a hard-plastic press with layered solid shadow, a soft neumorphic inset press, a 3D tilt slab, and a glossy depth pill.

Best forWeb3 dashboards, gaming landing pages, pricing tables, and any UI that should feel like it has weight.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<section class="bhe-3sk" aria-label="3D skeuomorphic button press effects demo">
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__plastic" type="button">Press Me</button><span class="bhe-3sk__label">Hard Plastic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__neu" type="button">Settings</button><span class="bhe-3sk__label">Soft Neumorphic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__slab" type="button">Confirm</button><span class="bhe-3sk__label">3D Tilt Slab</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__pill" type="button">Upgrade</button><span class="bhe-3sk__label">Glossy Pill</span></div>
</section>

<section class="bhe-3sk" aria-label="3D skeuomorphic button press effects demo">
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__plastic" type="button">Press Me</button><span class="bhe-3sk__label">Hard Plastic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__neu" type="button">Settings</button><span class="bhe-3sk__label">Soft Neumorphic</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__slab" type="button">Confirm</button><span class="bhe-3sk__label">3D Tilt Slab</span></div>
  <div class="bhe-3sk__cell"><button class="bhe-3sk__btn bhe-3sk__pill" type="button">Upgrade</button><span class="bhe-3sk__label">Glossy Pill</span></div>
</section>

.bhe-3sk {
  --bhe-3sk-bg: #e8ebf0;
  --bhe-3sk-ink: #2a2d34;
  --bhe-3sk-muted: #7c818c;
  --bhe-3sk-primary: #5b6ef5;
  --bhe-3sk-primary-dark: #3a48b8;
  --bhe-3sk-green: #2bb673;
  --bhe-3sk-green-dark: #1c8a55;
  --bhe-3sk-surface: #f6f7fb;
  --bhe-3sk-shadow-light: #ffffff;
  --bhe-3sk-shadow-dark: #c4c9d4;

  background: var(--bhe-3sk-bg); color: var(--bhe-3sk-ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-3sk *, .bhe-3sk *::before, .bhe-3sk *::after { box-sizing: border-box; }
.bhe-3sk__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-3sk__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-3sk-muted); text-transform: uppercase; }
.bhe-3sk__btn { font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: none; }

/* 1: hard plastic press */
.bhe-3sk__plastic {
  background: var(--bhe-3sk-primary); color: #fff;
  padding: 1rem 2.4rem; border-radius: 14px;
  box-shadow: 0 8px 0 var(--bhe-3sk-primary-dark), 0 14px 22px rgba(0,0,0,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-3sk__plastic:hover  { transform: translateY(-3px); box-shadow: 0 11px 0 var(--bhe-3sk-primary-dark), 0 20px 28px rgba(0,0,0,0.4); }
.bhe-3sk__plastic:active { transform: translateY(8px);  box-shadow: 0 0 0 var(--bhe-3sk-primary-dark),  0 4px 10px rgba(0,0,0,0.3); }

/* 2: neumorphic soft press */
.bhe-3sk__neu {
  background: var(--bhe-3sk-surface); color: var(--bhe-3sk-ink);
  padding: 1.1rem 2.6rem; border-radius: 16px;
  box-shadow: 6px 6px 14px var(--bhe-3sk-shadow-dark), -6px -6px 14px var(--bhe-3sk-shadow-light);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bhe-3sk__neu:hover  { box-shadow: 8px 8px 18px var(--bhe-3sk-shadow-dark), -8px -8px 18px var(--bhe-3sk-shadow-light); transform: translateY(-2px); }
.bhe-3sk__neu:active { box-shadow: inset 5px 5px 12px var(--bhe-3sk-shadow-dark), inset -5px -5px 12px var(--bhe-3sk-shadow-light); transform: translateY(0); color: var(--bhe-3sk-primary); }

/* 3: 3D tilt slab */
.bhe-3sk__slab {
  background: var(--bhe-3sk-green); color: #fff;
  padding: 1rem 2.4rem; border-radius: 10px;
  box-shadow: -6px 6px 0 var(--bhe-3sk-green-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bhe-3sk__slab:hover  { transform: translate(3px,-3px);  box-shadow: -9px 9px 0 var(--bhe-3sk-green-dark); }
.bhe-3sk__slab:active { transform: translate(-6px,6px);  box-shadow: 0 0 0 var(--bhe-3sk-green-dark); }

/* 4: glossy pill */
.bhe-3sk__pill {
  position: relative;
  background: linear-gradient(180deg, #ff8a5b, #ef5a3c);
  color: #fff; padding: 1.05rem 2.8rem; border-radius: 40px;
  box-shadow: 0 6px 0 #b83a22, 0 12px 24px rgba(184,58,34,0.45), inset 0 2px 2px rgba(255,255,255,0.5);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bhe-3sk__pill:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 #b83a22, 0 16px 30px rgba(184,58,34,0.5), inset 0 2px 2px rgba(255,255,255,0.5); }
.bhe-3sk__pill:active { transform: translateY(6px);  box-shadow: 0 0 0 #b83a22, 0 4px 12px rgba(184,58,34,0.4), inset 0 2px 2px rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .bhe-3sk__plastic, .bhe-3sk__neu, .bhe-3sk__slab, .bhe-3sk__pill { transition: none; }
}

.bhe-3sk {
  --bhe-3sk-bg: #e8ebf0;
  --bhe-3sk-ink: #2a2d34;
  --bhe-3sk-muted: #7c818c;
  --bhe-3sk-primary: #5b6ef5;
  --bhe-3sk-primary-dark: #3a48b8;
  --bhe-3sk-green: #2bb673;
  --bhe-3sk-green-dark: #1c8a55;
  --bhe-3sk-surface: #f6f7fb;
  --bhe-3sk-shadow-light: #ffffff;
  --bhe-3sk-shadow-dark: #c4c9d4;

  background: var(--bhe-3sk-bg); color: var(--bhe-3sk-ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  display: flex; flex-wrap: wrap; gap: 3rem;
  align-items: center; justify-content: center;
  padding: 3rem 2rem; min-height: 320px;
  box-sizing: border-box;
}
.bhe-3sk *, .bhe-3sk *::before, .bhe-3sk *::after { box-sizing: border-box; }
.bhe-3sk__cell { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.bhe-3sk__label { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--bhe-3sk-muted); text-transform: uppercase; }
.bhe-3sk__btn { font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: none; }

/* 1: hard plastic press */
.bhe-3sk__plastic {
  background: var(--bhe-3sk-primary); color: #fff;
  padding: 1rem 2.4rem; border-radius: 14px;
  box-shadow: 0 8px 0 var(--bhe-3sk-primary-dark), 0 14px 22px rgba(0,0,0,0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bhe-3sk__plastic:hover  { transform: translateY(-3px); box-shadow: 0 11px 0 var(--bhe-3sk-primary-dark), 0 20px 28px rgba(0,0,0,0.4); }
.bhe-3sk__plastic:active { transform: translateY(8px);  box-shadow: 0 0 0 var(--bhe-3sk-primary-dark),  0 4px 10px rgba(0,0,0,0.3); }

/* 2: neumorphic soft press */
.bhe-3sk__neu {
  background: var(--bhe-3sk-surface); color: var(--bhe-3sk-ink);
  padding: 1.1rem 2.6rem; border-radius: 16px;
  box-shadow: 6px 6px 14px var(--bhe-3sk-shadow-dark), -6px -6px 14px var(--bhe-3sk-shadow-light);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bhe-3sk__neu:hover  { box-shadow: 8px 8px 18px var(--bhe-3sk-shadow-dark), -8px -8px 18px var(--bhe-3sk-shadow-light); transform: translateY(-2px); }
.bhe-3sk__neu:active { box-shadow: inset 5px 5px 12px var(--bhe-3sk-shadow-dark), inset -5px -5px 12px var(--bhe-3sk-shadow-light); transform: translateY(0); color: var(--bhe-3sk-primary); }

/* 3: 3D tilt slab */
.bhe-3sk__slab {
  background: var(--bhe-3sk-green); color: #fff;
  padding: 1rem 2.4rem; border-radius: 10px;
  box-shadow: -6px 6px 0 var(--bhe-3sk-green-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bhe-3sk__slab:hover  { transform: translate(3px,-3px);  box-shadow: -9px 9px 0 var(--bhe-3sk-green-dark); }
.bhe-3sk__slab:active { transform: translate(-6px,6px);  box-shadow: 0 0 0 var(--bhe-3sk-green-dark); }

/* 4: glossy pill */
.bhe-3sk__pill {
  position: relative;
  background: linear-gradient(180deg, #ff8a5b, #ef5a3c);
  color: #fff; padding: 1.05rem 2.8rem; border-radius: 40px;
  box-shadow: 0 6px 0 #b83a22, 0 12px 24px rgba(184,58,34,0.45), inset 0 2px 2px rgba(255,255,255,0.5);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bhe-3sk__pill:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 #b83a22, 0 16px 30px rgba(184,58,34,0.5), inset 0 2px 2px rgba(255,255,255,0.5); }
.bhe-3sk__pill:active { transform: translateY(6px);  box-shadow: 0 0 0 #b83a22, 0 4px 12px rgba(184,58,34,0.4), inset 0 2px 2px rgba(255,255,255,0.5); }

@media (prefers-reduced-motion: reduce) {
  .bhe-3sk__plastic, .bhe-3sk__neu, .bhe-3sk__slab, .bhe-3sk__pill { transition: none; }
}

More from 27 CSS Button Hover Effects

Glitch Slice Neon Pulse Split Reveal Diagonal Shutter Elastic Lift Center Underline Draw 3D Flip Particle Burst Slide Doors Hard Shadow Shift Rainbow Border Spin Morph Shape

View the full collection →