Hoeveel WordPress plugins zijn te veel? Data van 1019 sites

Buttons zijn de meest fundamentele interactie-elementen in webdesign. Een goed ontworpen button maakt het verschil tussen conversie en bounce. In 2025 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 is de stijltaal waarmee je de visuele opmaak en layout van HTML-pagina’s bepaalt. technieken. Klaar om je buttons te upgraden?

🎯 Snel kiezen? Hier zijn onze aanbevelingen:

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

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>

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

.btn-3d {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 8px 0 #4a3b7a, 0 12px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease;
  position: relative;
  top: 0;
}

.btn-3d:hover {
  box-shadow: 0 10px 0 #4a3b7a, 0 14px 25px rgba(0, 0, 0, 0.4);
  top: -2px;
}

.btn-3d:active {
  box-shadow: 0 2px 0 #4a3b7a, 0 4px 8px rgba(0, 0, 0, 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>

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

.btn-neomorphic {
  padding: 20px 50px;
  font-size: 18px;
  font-weight: 600;
  color: #31344b;
  background: #e0e5ec;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6),
              -9px -9px 16px rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
}

.btn-neomorphic:hover {
  box-shadow: 6px 6px 12px rgba(163, 177, 198, 0.6),
              -6px -6px 12px rgba(255, 255, 255, 0.5);
}

.btn-neomorphic:active {
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6),
              inset -4px -4px 8px rgba(255, 255, 255, 0.5);
}

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>

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

.btn-isometric {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.btn-isometric span {
  display: block;
  padding: 20px 60px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: #e74c3c;
  transform: skewY(-5deg);
  box-shadow:
    6px 6px 0 #c0392b,
    12px 12px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.btn-isometric:hover span {
  transform: skewY(-5deg) translateY(-4px);
  box-shadow:
    8px 8px 0 #c0392b,
    16px 16px 25px rgba(0, 0, 0, 0.6);
}

.btn-isometric:active span {
  transform: skewY(-5deg) translateY(2px);
  box-shadow:
    3px 3px 0 #c0392b,
    6px 6px 10px rgba(0, 0, 0, 0.4);
}

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

Neon & Glow Effects

6. 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>

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

.btn-neon {
  padding: 20px 50px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #00ffff;
  background: transparent;
  border: 2px solid #00ffff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  text-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff;
  box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff,
    inset 0 0 10px rgba(0, 255, 255, 0.2);
  animation: neon-pulse 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.btn-neon:hover {
  color: #0a0e27;
  background: #00ffff;
  text-shadow: none;
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px #00ffff,
      0 0 20px #00ffff,
      0 0 30px #00ffff,
      inset 0 0 10px rgba(0, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 0 15px #00ffff,
      0 0 30px #00ffff,
      0 0 45px #00ffff,
      inset 0 0 15px rgba(0, 255, 255, 0.4);
  }
}

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

7. RGB Split Glow Button

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

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

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

.btn-rgb {
  padding: 18px 45px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: #222;
  border: 2px solid white;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  text-shadow:
    -2px -2px 0 #ff0000,
    2px 2px 0 #00ffff;
}

.btn-rgb::before {
  content: 'ACTIVATE';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-rgb:hover {
  box-shadow:
    -4px -4px 20px rgba(255, 0, 0, 0.6),
    4px 4px 20px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(0, 255, 0, 0.3);
  text-shadow:
    -3px -3px 0 #ff0000,
    3px 3px 0 #00ffff;
  transform: scale(1.05);
}

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

9. Holographic Rainbow Button

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

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

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

.btn-holo {
  padding: 18px 50px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(
    45deg,
    #ff0080, #ff8c00, #40e0d0, #ff0080
  );
  background-size: 300% 300%;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  animation: holo-shift 4s ease infinite;
  box-shadow:
    0 0 20px rgba(255, 0, 128, 0.5),
    0 0 40px rgba(64, 224, 208, 0.3);
  transition: transform 0.2s ease;
}

.btn-holo::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: inherit;
  border-radius: inherit;
  filter: blur(10px);
  opacity: 0.7;
  z-index: -1;
}

.btn-holo:hover {
  transform: scale(1.05) translateY(-2px);
  animation-duration: 2s;
}

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

Gradient & Color Transition Buttons

11. Animated Gradient Slide

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

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

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

.btn-gradient-slide {
  padding: 18px 45px;
  font-size: 17px;
  font-weight: 600;
  color: white;
  background: linear-gradient(
    to right,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );
  background-size: 200% 100%;
  background-position: left;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-position 0.5s ease, transform 0.2s ease;
}

.btn-gradient-slide:hover {
  background-position: right;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(118, 75, 162, 0.4);
}

.btn-gradient-slide:active {
  transform: translateY(0);
}

12. 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>

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

.btn-mesh {
  padding: 0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.btn-mesh-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, #ff6b9d 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, #c06cd7 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #ffa94d 0%, transparent 50%);
  filter: blur(30px);
  transition: filter 0.3s ease;
}

.btn-mesh-text {
  position: relative;
  display: block;
  padding: 20px 50px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.btn-mesh:hover {
  transform: scale(1.05);
}

.btn-mesh:hover .btn-mesh-bg {
  filter: blur(20px);
}

14. Duotone Gradient Button

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

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

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

.btn-duotone {
  padding: 20px 55px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

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

.btn-duotone:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(118, 75, 162, 0.5);
}

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

Minimal & Flat Design Buttons

16. Material Design Ripple

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

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

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

.btn-ripple {
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  background: #2196F3;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
  transition: box-shadow 0.3s ease;
}

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

.btn-ripple:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24);
}

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

17. Slide Fill from Left

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

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

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

.btn-slide {
  padding: 18px 45px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  background: white;
  border: 2px solid #2c3e50;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}

.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #2c3e50;
  z-index: -1;
  transition: width 0.4s ease;
}

.btn-slide:hover {
  color: white;
}

.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.

18. Border Grow Animation

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

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

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

.btn-bordergrow {
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 500;
  color: #495057;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

.btn-bordergrow::before,
.btn-bordergrow::after {
  content: '';
  position: absolute;
  background: #6c757d;
  transition: all 0.3s ease;
}

.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::before {
  width: 100%;
}

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

19. Underline Expand from Center

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

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

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

.btn-underline {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  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: #007bff;
  transition: width 0.3s ease;
}

.btn-underline:hover {
  color: #007bff;
}

.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

21. 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>

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

.btn-liquid {
  padding: 0;
  width: 180px;
  height: 60px;
  font-size: 18px;
  font-weight: bold;
  color: #3498db;
  background: transparent;
  border: 3px solid #3498db;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
}

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

.btn-liquid-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #3498db;
  transition: height 0.6s ease;
}

.btn-liquid:hover {
  color: white;
}

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

22. Shutter Reveal Effect

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

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

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

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

.btn-shutter span {
  display: block;
  padding: 20px 50px;
  font-size: 18px;
  font-weight: bold;
  color: #16213e;
  background: #0f3460;
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}

.btn-shutter::before,
.btn-shutter::after {
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  background: #e94560;
  transition: width 0.3s ease;
  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%;
}

23. 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>

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

.btn-glitch {
  padding: 20px 50px;
  font-size: 20px;
  font-weight: bold;
  color: #00ff41;
  background: #0d0d0d;
  border: 2px solid #00ff41;
  cursor: pointer;
  position: relative;
  text-shadow: 2px 2px #ff00de;
  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;
  opacity: 0;
}

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

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

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

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

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

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

24. Morphing Shape Button

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

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

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

.btn-morph {
  padding: 20px 50px;
  font-size: 18px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-morph:hover {
  border-radius: 15px;
  transform: rotate(2deg) scale(1.1);
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 15px 35px rgba(240, 147, 251, 0.4);
}

.btn-morph:active {
  transform: rotate(-2deg) scale(1.05);
}

Icon & Social Media Buttons

26. Circular Icon Reveal

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

<button class="btn-icon-reveal">
  <span class="icon">→</span>
</button>

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

.btn-icon-reveal {
  width: 60px;
  height: 60px;
  padding: 0;
  font-size: 24px;
  color: white;
  background: #007bff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-icon-reveal .icon {
  transform: translateX(-100%) rotate(-180deg);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-icon-reveal:hover {
  width: 120px;
  border-radius: 30px;
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.btn-icon-reveal:hover .icon {
  transform: translateX(0) rotate(0deg);
}

27. 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: #fff;
}

.btn-icon-swap {
  width: 70px;
  height: 70px;
  padding: 0;
  font-size: 32px;
  background: white;
  border: 2px solid #e74c3c;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.btn-icon-swap .icon-default,
.btn-icon-swap .icon-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.btn-icon-swap .icon-default {
  color: #e74c3c;
  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: #e74c3c;
  transform: scale(1.1);
}

.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

29. 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>

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

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

.btn-draw span {
  display: block;
  padding: 20px 50px;
  font-size: 18px;
  font-weight: 600;
  color: #00ff88;
  position: relative;
  z-index: 1;
}

.btn-draw::before,
.btn-draw::after,
.btn-draw span::before,
.btn-draw span::after {
  content: '';
  position: absolute;
  background: #00ff88;
  transition: all 0.5s ease;
}

.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.4s;
}

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

.btn-draw span::after {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  transition-delay: 0.6s;
}

.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

Gebruik alleen transform en opacity voor animaties waar mogelijk want deze properties trigger geen layout reflow en zijn GPU-accelerated voor 60fps performance.

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

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

Accessibility Overwegingen

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

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:

CSSKeurigOnline zegtCSSCSS is de stijltaal waarmee je de visuele opmaak en layout van HTML-pagina’s bepaalt. 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.

Je winkelwagen is leeg

Op deze pagina

Hoeveel WordPress plugins zijn te veel? Data van 1019 sites

20 voorbeelden van button designs

3D & Neumorphism Buttons

1. Classic 3D Push Button

2. Neumorphic Soft Button

3. Isometric 3D Button

Neon & Glow Effects

6. Cyberpunk Neon Button

7. RGB Split Glow Button

9. Holographic Rainbow Button

Gradient & Color Transition Buttons

11. Animated Gradient Slide

12. Mesh Gradient Blur

14. Duotone Gradient Button

Minimal & Flat Design Buttons

16. Material Design Ripple

17. Slide Fill from Left

18. Border Grow Animation

19. Underline Expand from Center

Creative & Animated Buttons

21. Liquid Fill Animation

22. Shutter Reveal Effect

23. Glitch Effect Button

24. Morphing Shape Button

Icon & Social Media Buttons

26. Circular Icon Reveal

27. Icon Swap Button

Ghost & Outline Buttons

29. Drawing Border Animation

Implementatie Tips & Best Practices

Performance Optimalisatie

Accessibility Overwegingen

Responsive Design

Motion Preferences Respecteren

CSS Custom Properties voor Themability

Browser Compatibiliteit

Conclusie: De Kunst van Button Design

Wanneer welke stijl te gebruiken?

Je winkelwagen is leeg

Je winkelwagen is leeg

Op deze pagina

20 voorbeelden van button designs

3D & Neumorphism Buttons

1. Classic 3D Push Button

2. Neumorphic Soft Button

3. Isometric 3D Button

Neon & Glow Effects

6. Cyberpunk Neon Button

7. RGB Split Glow Button

9. Holographic Rainbow Button

Gradient & Color Transition Buttons

11. Animated Gradient Slide

12. Mesh Gradient Blur

14. Duotone Gradient Button

Minimal & Flat Design Buttons

16. Material Design Ripple

17. Slide Fill from Left

18. Border Grow Animation

19. Underline Expand from Center

Creative & Animated Buttons

21. Liquid Fill Animation

22. Shutter Reveal Effect

23. Glitch Effect Button

24. Morphing Shape Button

Icon & Social Media Buttons

26. Circular Icon Reveal

27. Icon Swap Button

Ghost & Outline Buttons

29. Drawing Border Animation

Implementatie Tips & Best Practices

Performance Optimalisatie

Accessibility Overwegingen

Responsive Design

Motion Preferences Respecteren

CSS Custom Properties voor Themability

Browser Compatibiliteit

Conclusie: De Kunst van Button Design

Wanneer welke stijl te gebruiken?

Welke WordPress plugins vertragen je site? Analyse van 1019 websites

Je WordPress sneller maken in 2025

CSS & Javascript loading animaties: 20 voorbeelden