CSS button designs - 20 codepen voorbeelden

Snel kiezen? Hier zijn onze aanbevelingen:

E-commerce CTA: 3D Push Button (#1) - Fysieke feedback verhoogt conversie
Modern & subtiel: Neumorphic (#2) of Gradient Slide (#7)
Dark mode interfaces: Cyberpunk Neon (#4) of RGB Split (#5)
Minimalistisch: Material Ripple (#10) of Underline Expand (#13)
Creatief/portfolio: Glitch Effect (#16) of Liquid Fill (#14)

Buttons zijn de meest fundamentele interactie-elementen in webdesign. Een goed ontworpen button maakt het verschil tussen conversie en bounce. In 2026 verwachten gebruikers buttons die functioneel zijn maar ook visueel aantrekkelijk en responsief aanvoelen.

In dit artikel ontdek je 20 moderne button designs met complete code voorbeelden. Van 3D-effecten en neon-glow tot minimalistische flat designs en complexe hover animaties. Elke button komt met een live CodePen demo waar je direct mee kunt experimenteren plus technische uitleg van de CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. technieken. Bekijk ook onze 20 CSS loading animaties voor meer interactieve voorbeelden. Klaar om je buttons te upgraden?

Abstracte illustratie van diverse CSS button designs: compositie met 3D push button met schaduw diepte, neon glow button met gloed effect, gradient button met kleurverloop, flat minimal button, neumorphic soft UI button en ghost outline button - toont de verscheidenheid aan moderne button stijlen

20 voorbeelden van button designs

We gaan niet alleen de buttons bekijken maar ook de technische principes erachter. Je leert waarom bepaalde CSS properties beter zijn voor performance en hoe je verschillende effecten combineert voor unieke designs. De voorbeelden zijn georganiseerd per stijl-categorie zoals 3D effecten, neon glow, gradients, minimaal, creatief, icon buttons en ghost/outline designs.

3D & Neumorphism Buttons

1. Classic 3D Push Button

Een button met fysieke druk-feedback via transform: translateY() en dynamische schaduw aanpassing. Perfect voor call-to-action elementen.

<button class="btn-3d">Push Me</button>

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0f172a;
}

.btn-3d {
  padding: 18px 48px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(145deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 
    0 8px 0 #4c1d95,
    0 10px 20px rgba(139, 92, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  top: 0;
  text-transform: uppercase;
}

.btn-3d:hover {
  box-shadow: 
    0 10px 0 #4c1d95,
    0 15px 30px rgba(139, 92, 246, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  top: -3px;
  background: linear-gradient(145deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
}

.btn-3d:active {
  box-shadow: 
    0 2px 0 #4c1d95,
    0 4px 10px rgba(139, 92, 246, 0.3);
  top: 6px;
}

Deze button gebruikt de volgende CSS technieken:

box-shadow: Dubbele schaduw voor 3D-diepte effect
position: relative met top offset voor push beweging
linear-gradient: Kleurverloop voor depth
:active state voor click feedback

2. Neumorphic Soft Button

Soft UI design met dubbele schaduwen van licht en donker voor een "gedrukt in het oppervlak" effect. Populair in moderne iOS-stijl interfaces.

<button class="btn-neomorphic">Click Me</button>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #e8ece9;
}

.btn-neomorphic {
  padding: 22px 54px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #4a5568;
  background: #e8ece9;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 
    8px 8px 20px rgba(166, 180, 172, 0.7),
    -8px -8px 20px rgba(255, 255, 255, 0.85),
    inset 0 0 0 transparent;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-neomorphic:hover {
  color: #319795;
  box-shadow: 
    5px 5px 15px rgba(166, 180, 172, 0.6),
    -5px -5px 15px rgba(255, 255, 255, 0.9);
}

.btn-neomorphic:active {
  box-shadow: 
    inset 6px 6px 12px rgba(166, 180, 172, 0.5),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7);
  color: #2c7a7b;
}

Techniek: Neumorphism gebruikt twee schaduwen met een donkere rechtsonder en een lichte linksboven. Bij :active worden deze inset schaduwen om de "ingeduwd" illusie te creëren.

3. Isometric 3D Button

Isometrische projectie met transform: skew() voor een 3D-blok effect. Perfect voor gaming interfaces of retro designs.

<button class="btn-isometric">
  <span>START</span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1e293b;
}

.btn-isometric {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-isometric span {
  display: block;
  padding: 22px 65px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: white;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  transform: skewY(-4deg);
  box-shadow:
    7px 7px 0 #9f1239,
    14px 14px 25px rgba(244, 63, 94, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-isometric:hover span {
  transform: skewY(-4deg) translateY(-5px);
  background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
  box-shadow:
    9px 9px 0 #9f1239,
    18px 18px 35px rgba(244, 63, 94, 0.4);
}

.btn-isometric:active span {
  transform: skewY(-4deg) translateY(3px);
  box-shadow:
    3px 3px 0 #9f1239,
    6px 6px 12px rgba(244, 63, 94, 0.2);
}

Performance tip: skewY() en translateY() zijn GPU-accelerated dus deze animatie is zeer performant.

Neon & Glow Effects

4. Cyberpunk Neon Button

Meerdere gekleurde schaduwen met pulserende animatie voor een neon-bord effect. Perfect voor dark mode interfaces.

<button class="btn-neon">ENTER</button>

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #030712;
}

.btn-neon {
  padding: 20px 55px;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #22d3ee;
  background: transparent;
  border: 2px solid #22d3ee;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  text-shadow:
    0 0 8px #22d3ee,
    0 0 20px #22d3ee,
    0 0 35px #06b6d4;
  box-shadow:
    0 0 8px #22d3ee,
    0 0 20px rgba(34, 211, 238, 0.6),
    0 0 40px rgba(6, 182, 212, 0.3),
    inset 0 0 12px rgba(34, 211, 238, 0.15);
  animation: neon-pulse 2.5s ease-in-out infinite;
  transition: all 0.25s ease;
}

.btn-neon:hover {
  color: #030712;
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  text-shadow: none;
  border-color: transparent;
  box-shadow:
    0 0 25px #22d3ee,
    0 0 50px rgba(6, 182, 212, 0.5);
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 8px #22d3ee,
      0 0 20px rgba(34, 211, 238, 0.6),
      0 0 40px rgba(6, 182, 212, 0.3),
      inset 0 0 12px rgba(34, 211, 238, 0.15);
  }
  50% {
    box-shadow:
      0 0 12px #22d3ee,
      0 0 30px rgba(34, 211, 238, 0.8),
      0 0 55px rgba(6, 182, 212, 0.5),
      inset 0 0 18px rgba(34, 211, 238, 0.25);
  }
}

Neon-effecten stapelen meerdere box-shadow en text-shadow waarden met verschillende blur radius voor een authentiek glow effect.

5. RGB Split Glow Button

Chromatic aberration effect met rode, groene en blauwe schaduwen voor een futuristische tech aesthetic.

<button class="btn-rgb">ACTIVATE</button>

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #09090b;
}

.btn-rgb {
  padding: 20px 50px;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #fafafa;
  background: #18181b;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow:
    -2px -2px 0 #f43f5e,
    2px 2px 0 #22d3ee;
}

.btn-rgb::before {
  content: 'ACTIVATE';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-rgb:hover {
  background: #27272a;
  box-shadow:
    -5px -5px 25px rgba(244, 63, 94, 0.5),
    5px 5px 25px rgba(34, 211, 238, 0.5),
    0 0 40px rgba(168, 85, 247, 0.25);
  text-shadow:
    -3px -3px 2px #f43f5e,
    3px 3px 2px #22d3ee;
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 1);
}

.btn-rgb:active {
  transform: scale(0.97);
}

6. Holographic Rainbow Button

Regenboog-gradient met bewegende glans via background-position animatie. Trendy en eye-catching.

<button class="btn-holo">Premium</button>

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0c0a09;
}

.btn-holo {
  padding: 20px 55px;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: white;
  background: linear-gradient(
    135deg,
    #ec4899 0%, #f97316 25%, #22d3ee 50%, #a855f7 75%, #ec4899 100%
  );
  background-size: 400% 400%;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  position: relative;
  animation: holo-shift 5s ease infinite;
  box-shadow:
    0 0 25px rgba(236, 72, 153, 0.4),
    0 0 50px rgba(168, 85, 247, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-holo::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: inherit;
  background-size: inherit;
  border-radius: 16px;
  filter: blur(15px);
  opacity: 0.6;
  z-index: -1;
  animation: inherit;
}

.btn-holo:hover {
  transform: scale(1.06) translateY(-3px);
  animation-duration: 2.5s;
  box-shadow:
    0 0 35px rgba(236, 72, 153, 0.5),
    0 0 70px rgba(168, 85, 247, 0.3);
}

@keyframes holo-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

Gradient & Color Transition Buttons

7. Animated Gradient Slide

Bewegende gradient via background-size en background-position animatie bij hover.

<button class="btn-gradient-slide">Get Started</button>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1c1917;
}

.btn-gradient-slide {
  padding: 18px 48px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: white;
  background: linear-gradient(
    105deg,
    #8b5cf6 0%,
    #d946ef 35%,
    #f43f5e 70%,
    #fb923c 100%
  );
  background-size: 200% 100%;
  background-position: left;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
}

.btn-gradient-slide:hover {
  background-position: right;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(217, 70, 239, 0.35);
}

.btn-gradient-slide:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(217, 70, 239, 0.3);
}

8. Mesh Gradient Blur

Multi-color mesh gradient met filter: blur() voor organische soft blending.

<button class="btn-mesh">
  <span class="btn-mesh-bg"></span>
  <span class="btn-mesh-text">Explore</span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fafaf9;
}

.btn-mesh {
  padding: 0;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.btn-mesh-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 40%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 85% 60%, #a78bfa 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #fbbf24 0%, transparent 50%);
  filter: blur(28px);
  transition: all 0.35s ease;
}

.btn-mesh-text {
  position: relative;
  display: block;
  padding: 22px 55px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: white;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.btn-mesh:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.btn-mesh:hover .btn-mesh-bg {
  filter: blur(22px);
  transform: scale(1.05);
}

9. Duotone Gradient Button

Twee-kleurige gradient met animated hue rotate voor dynamische kleurverandering.

<button class="btn-duotone"><span>Continue</span></button>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0f172a;
}

.btn-duotone {
  padding: 20px 55px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.btn-duotone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 0;
}

.btn-duotone:hover::before {
  opacity: 1;
}

.btn-duotone:hover {
  transform: scale(1.06);
  box-shadow: 0 15px 40px rgba(236, 72, 153, 0.4);
}

.btn-duotone span {
  position: relative;
  z-index: 1;
}

Minimal & Flat Design Buttons

10. Material Design Ripple

Google Material Design ripple effect met ::before pseudo-element animatie bij click.

<button class="btn-ripple">Click Me</button>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8fafc;
}

.btn-ripple {
  padding: 16px 42px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: white;
  background: #6366f1;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.btn-ripple:hover {
  background: #4f46e5;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

.btn-ripple:active::before {
  width: 320px;
  height: 320px;
}

11. Slide Fill from Left

Achtergrondkleur slide-in effect met ::before transform en z-index layering.

<button class="btn-slide">Hover Me</button>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f1f5f9;
}

.btn-slide {
  padding: 18px 48px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #1e293b;
  background: white;
  border: 2px solid #1e293b;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  z-index: -1;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-slide:hover {
  color: white;
  border-color: #334155;
}

.btn-slide:hover::before {
  width: 100%;
}

Techniek: transform-origin op left zorgt dat de fill animatie start vanaf de linker kant. Change naar right voor opposite direction.

12. Border Grow Animation

Border animatie via ::after met width/height transition voor een clean effect.

<button class="btn-bordergrow">Learn More</button>

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fafaf9;
}

.btn-bordergrow {
  padding: 16px 44px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #44403c;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.btn-bordergrow::before,
.btn-bordergrow::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, #78716c 0%, #a8a29e 100%);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-bordergrow::before {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
}

.btn-bordergrow::after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
}

.btn-bordergrow:hover {
  color: #1c1917;
}

.btn-bordergrow:hover::before {
  width: 100%;
}

.btn-bordergrow:hover::after {
  width: 100%;
}

13. Underline Expand from Center

Simpel maar elegant met een underline die expand vanaf het center bij hover.

<button class="btn-underline">Read More</button>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ffffff;
}

.btn-underline {
  padding: 12px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: #27272a;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
}

.btn-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-underline:hover {
  color: #6366f1;
}

.btn-underline:hover::after {
  width: 100%;
}

Use case: Perfect voor text-based CTAs, article links of minimalist interfaces waar je geen visuele overload wil.

Creative & Animated Buttons

14. Liquid Fill Animation

Vloeiende "fill" animatie via clip-path met wave effect voor organische beweging.

<button class="btn-liquid">
  <span class="btn-liquid-text">Pour</span>
  <span class="btn-liquid-wave"></span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #18181b;
}

.btn-liquid {
  padding: 0;
  width: 190px;
  height: 62px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #22d3ee;
  background: transparent;
  border: 3px solid #22d3ee;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.btn-liquid-text {
  position: relative;
  z-index: 2;
}

.btn-liquid-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #06b6d4 0%, #22d3ee 100%);
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-liquid:hover {
  color: #18181b;
  border-color: #06b6d4;
}

.btn-liquid:hover .btn-liquid-wave {
  height: 100%;
}

15. Shutter Reveal Effect

Dubbele shutter animatie met ::before en ::after die sliding in vanuit edges.

<button class="btn-shutter">
  <span>REVEAL</span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0c0a09;
}

.btn-shutter {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.btn-shutter span {
  display: block;
  padding: 22px 55px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #52525b;
  background: #27272a;
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

.btn-shutter::before,
.btn-shutter::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-shutter::before {
  left: 0;
}

.btn-shutter::after {
  right: 0;
}

.btn-shutter:hover span {
  color: white;
}

.btn-shutter:hover::before,
.btn-shutter:hover::after {
  width: 50%;
}

16. Glitch Effect Button

Cyberpunk-stijl glitch met clip-path slices en text-shadow offset voor een digital corruption effect.

<button class="btn-glitch" data-text="ERROR">ERROR</button>

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #030712;
}

.btn-glitch {
  padding: 22px 55px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #4ade80;
  background: #0f172a;
  border: 2px solid #4ade80;
  cursor: pointer;
  position: relative;
  text-shadow: 2px 2px #d946ef;
  transition: all 0.1s ease;
}

.btn-glitch::before,
.btn-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0;
}

.btn-glitch::before {
  color: #22d3ee;
  animation: glitch-1 0.25s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.btn-glitch::after {
  color: #d946ef;
  animation: glitch-2 0.25s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

.btn-glitch:hover::before,
.btn-glitch:hover::after {
  opacity: 1;
}

.btn-glitch:hover {
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-4px, 4px); }
  40% { transform: translate(-4px, -4px); }
  60% { transform: translate(4px, 4px); }
  80% { transform: translate(4px, -4px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(4px, -4px); }
  40% { transform: translate(4px, 4px); }
  60% { transform: translate(-4px, -4px); }
  80% { transform: translate(-4px, 4px); }
}

Techniek: De clip-path met polygon() knipt de pseudo-elements in horizontale slices terwijl random transforms het glitch effect creëren.

17. Morphing Shape Button

Button die van vorm verandert bij hover via border-radius en transform animatie.

<button class="btn-morph">Morph</button>

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0f172a;
}

.btn-morph {
  padding: 20px 55px;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: white;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-morph:hover {
  border-radius: 16px;
  transform: rotate(2deg) scale(1.12);
  background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
  box-shadow: 0 18px 45px rgba(236, 72, 153, 0.4);
}

.btn-morph:active {
  transform: rotate(-2deg) scale(1.06);
  box-shadow: 0 10px 30px rgba(236, 72, 153, 0.35);
}

Icon & Social Media Buttons

Icon buttons zijn perfect voor sociale media integraties en compacte acties. Wil je een specifieke implementatie? Bekijk onze handleiding voor het plaatsen van een WhatsApp button op je website.

18. Circular Icon Reveal

Icon die rotates in vanuit de cirkel edge met transform-origin manipulatie.

<button class="btn-icon-reveal">
  <span class="btn-text">Go</span>
  <svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</button>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8fafc;
}

.btn-icon-reveal {
  width: 60px;
  height: 60px;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  color: white;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
}

.btn-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-arrow {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon-reveal:hover {
  width: 120px;
  border-radius: 30px;
  padding: 0 22px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.btn-icon-reveal:hover .btn-text {
  max-width: 50px;
  opacity: 1;
}

.btn-icon-reveal:hover .btn-arrow {
  transform: translateX(3px);
}

19. Icon Swap Button

Icon die smooth swap naar een ander icon bij hover via opacity en transform.

<button class="btn-icon-swap">
  <span class="icon-default">♡</span>
  <span class="icon-hover">♥</span>
</button>

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fafaf9;
}

.btn-icon-swap {
  width: 72px;
  height: 72px;
  padding: 0;
  font-size: 30px;
  background: white;
  border: 2px solid #f43f5e;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.15);
}

.btn-icon-swap .icon-default,
.btn-icon-swap .icon-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-icon-swap .icon-default {
  color: #f43f5e;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.btn-icon-swap .icon-hover {
  color: white;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.btn-icon-swap:hover {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-color: transparent;
  transform: scale(1.12);
  box-shadow: 0 8px 25px rgba(244, 63, 94, 0.35);
}

.btn-icon-swap:hover .icon-default {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.btn-icon-swap:hover .icon-hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

Ghost & Outline Buttons

20. Drawing Border Animation

Border die "tekent" rondom de button via multiple pseudo-elements met een staggered animation.

<button class="btn-draw">
  <span>Hover</span>
</button>

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&display=swap');

body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #09090b;
}

.btn-draw {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

.btn-draw span {
  display: block;
  padding: 22px 55px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4ade80;
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.btn-draw::before,
.btn-draw::after,
.btn-draw span::before,
.btn-draw span::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-draw::before {
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  transition-delay: 0s;
}

.btn-draw::after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  transition-delay: 0.35s;
}

.btn-draw span::before {
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  transition-delay: 0.18s;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
}

.btn-draw span::after {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  transition-delay: 0.52s;
  background: linear-gradient(180deg, #22c55e 0%, #4ade80 100%);
}

.btn-draw:hover span {
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}

.btn-draw:hover::before,
.btn-draw:hover::after {
  width: 100%;
}

.btn-draw:hover span::before,
.btn-draw:hover span::after {
  height: 100%;
}

Animation sequence: Door verschillende transition-delay waarden te gebruiken tekent de border sequentially van top naar right naar bottom naar left.

Implementatie Tips & Best Practices

Performance Optimalisatie

Performance tip: Gebruik alleen transform en opacity voor animaties. Deze properties zijn GPU-accelerated en triggeren geen layout reflow, wat resulteert in vloeiende 60fps animaties.

Gebruik alleen transform en opacity voor animaties waar mogelijk want deze properties trigger geen layout reflow en zijn GPU-accelerated voor 60fps performance. Meer performance tips vind je in onze gids WordPress sneller maken.

/* ✅ Goed - GPU accelerated */
.button:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

/* ❌ Vermijd - triggers reflow */
.button:hover {
  margin-top: -2px;
}

Accessibility Overwegingen

Belangrijk voor toegankelijkheid: Zorg altijd voor minimaal 4.5:1 kleurcontrast (WCAG AA). Test je buttons met keyboard navigatie en voeg :focus-visible states toe voor zichtbare focus indicators.

Zorg voor voldoende color contrast. Minimaal 4.5:1 volgens WCAG AA. Voeg :focus-visible states toe. Voor keyboard navigatie:

.button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Responsive Design

Gebruik padding in em of rem units zodat buttons schalen met font-size en maak ze op mobile minimaal 44x44px voor touch targets.

.button {
  padding: 0.75rem 1.5rem;
  min-height: 44px;
  min-width: 44px;
}

Motion Preferences Respecteren

Inclusief design: Ongeveer 35% van volwassenen ervaart motion sensitivity. Met prefers-reduced-motion respecteer je hun voorkeuren automatisch.

Respecteer prefers-reduced-motion. Voor gebruikers met motion sensitivity:

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none !important;
    animation: none !important;
  }
}

CSS Custom Properties voor Themability

Gebruik CSS variabelen om button styles gemakkelijk aanpasbaar te maken:

:root {
  --btn-primary-bg: #3b82f6;
  --btn-primary-hover: #2563eb;
  --btn-radius: 0.5rem;
}

.button {
  background: var(--btn-primary-bg);
  border-radius: var(--btn-radius);
}

.button:hover {
  background: var(--btn-primary-hover);
}

Browser Compatibiliteit

De CSS technieken in deze voorbeelden worden breed ondersteund, maar sommige geavanceerde effecten vereisen moderne browsers. Hier is een overzicht:

CSS Feature	Chrome	Firefox	Safari	Edge
`transform`	✅ 36+	✅ 16+	✅ 9+	✅ 12+
`box-shadow`	✅ 10+	✅ 4+	✅ 5.1+	✅ 12+
`linear-gradient`	✅ 26+	✅ 16+	✅ 7+	✅ 12+
`filter: blur()`	✅ 53+	✅ 35+	✅ 9.1+	✅ 12+
`clip-path`	✅ 55+	✅ 54+	✅ 13.1+	✅ 79+
`backdrop-filter`	✅ 76+	✅ 103+	✅ 9+	✅ 79+

Bron: Can I Use (januari 2025). Alle basis button technieken (transform, box-shadow, gradient) werken in 98%+ van browsers worldwide.

Conclusie: De Kunst van Button Design

Deze 20 voorbeelden demonstreren de enorme creative mogelijkheden binnen button design van simpele flat buttons tot complexe 3D animaties. De keuze hangt af van je project's context, doelgroep en brand identity.

Wanneer welke stijl te gebruiken?

3D & Neumorphism: Gaming sites, playful brands, interactive experiences
Neon & Glow: Dark mode interfaces, tech/cyberpunk themes, nightlife/entertainment
Gradient: Modern SaaS, creative agencies, youth-oriented products
Minimal/Flat: Professional services, B2B platforms, clean design systems
Creative/Animated: Portfolios, art projects, experiential websites
Ghost/Outline: Secondary actions, overlays, minimalist interfaces

Remember: De beste button is niet de meest spectaculaire maar de button die duidelijk communiceert wat hij doet en gebruikers motiveert om te klikken. Form follows function, altijd.

Experimenteer met deze voorbeelden in je eigen projecten want de CodePen demos zijn fully editable. Pas kleuren, timings en effecten aan naar je brand identity. De code is er en het is tijd om te bouwen.

Bronnen en referenties

Dit artikel is gebaseerd op officiële documentatie en authoritative sources:

MDN Web Docs - CSS Reference: Officiële documentatie voor alle CSS properties gebruikt in dit artikel (transform, box-shadow, gradient, clip-path, etc.).
MDN Web Docs - CSS Transitions: Documentatie over transition properties en timing functions.
MDN Web Docs - CSS Animations: Complete gids voor @keyframes en animation properties.
Can I Use - Browser Compatibility Tables: Bron voor browser support data in de compatibiliteitstabel.
W3C - WCAG 2.1 Contrast Minimum: Richtlijnen voor kleurcontrast (4.5:1 ratio).
W3C - WCAG 2.1 Target Size: Richtlijnen voor minimum touch target sizes (44x44px).
web.dev - Animations Guide: Google's best practices voor performante CSS animaties.
web.dev - prefers-reduced-motion: Implementatiegids voor motion preferences.
Google Developers - Compositor-Only Properties: Uitleg over GPU-accelerated properties (transform, opacity).
CodePen - CodePen.io: Platform voor de interactieve code demos in dit artikel.

Let op: CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. features kunnen variëren per browser versie. Test altijd in je doelgroep browsers. Links gecontroleerd in december 2025.

Je winkelwagen is leeg