Bouton – 12 boutons CSS animés avec effets hover

14 0 Boutons codex Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Bouton – 12 boutons CSS animés avec effets hover

Recommandé

25 January 2026

Intégrer un jeu Flash avec Ruffle Player

11 January 2024

Écran de chargement avec points

15 October 2026

Lecteur vidéo YouTube dynamique avec HTML et JavaScript

HTML

<h1>Buttons</h1>
<p class="sub">12 animated CSS buttons — hover and click them. Each one is a single class you can copy.</p>
<div class="grid">
  <div class="cell"><button class="b1">Gradient Shift</button><code>.b1</code></div>
  <div class="cell"><button class="b2">Neon Glow</button><code>.b2</code></div>
  <div class="cell"><button class="b3"><span>Slide Fill</span></button><code>.b3</code></div>
  <div class="cell"><button class="b4">3D Push</button><code>.b4</code></div>
  <div class="cell"><button class="b5 ripple">Ripple Click</button><code>.b5</code></div>
  <div class="cell"><button class="b6">Border Draw</button><code>.b6</code></div>
  <div class="cell"><button class="b7">Shine</button><code>.b7</code></div>
  <div class="cell"><button class="b8"><i>→</i><span>Arrow</span></button><code>.b8</code></div>
  <div class="cell"><button class="b9">Glass</button><code>.b9</code></div>
  <div class="cell"><button class="b10" id="dl"><span>Download</span></button><code>.b10</code></div>
  <div class="cell"><button class="b11">Pulse</button><code>.b11</code></div>
  <div class="cell"><button class="b12" id="like">♥</button><code>.b12</code></div>
</div>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: #14152b; color: #fff; font-family: "Segoe UI", system-ui, sans-serif; padding: 50px 20px; }
h1 { text-align: center; font-size: 2.8rem; } .sub { text-align: center; opacity: .6; margin: 8px 0 40px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; max-width: 1050px; margin: 0 auto; }
.cell { background: #1d1f3d; border-radius: 18px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
code { opacity: .4; font-size: .8rem; }
button { font: 700 1rem "Segoe UI", system-ui, sans-serif; cursor: pointer; border: 0; color: #fff; padding: 14px 30px; border-radius: 12px; position: relative; overflow: hidden; }
.b1 { background: linear-gradient(90deg, #ff512f, #dd2476, #ff512f); background-size: 200%; transition: background-position .5s, transform .2s; }
.b1:hover { background-position: 100%; transform: translateY(-3px); }
.b2 { background: transparent; border: 2px solid #0ff; color: #0ff; transition: .3s; }
.b2:hover { background: #0ff; color: #111; box-shadow: 0 0 10px #0ff, 0 0 40px #0ff, 0 0 80px #0ff; }
.b3 { background: none; border: 2px solid #ffb703; color: #ffb703; z-index: 0; }
.b3::before { content: ""; position: absolute; inset: 0; background: #ffb703; transform: translateX(-101%); transition: transform .35s; z-index: -1; }
.b3:hover { color: #14152b; } .b3:hover::before { transform: none; }
.b4 { background: #4cc9f0; box-shadow: 0 7px 0 #2a8bb0; transition: .1s; overflow: visible; }
.b4:active { transform: translateY(6px); box-shadow: 0 1px 0 #2a8bb0; }
.b5 { background: #7209b7; }
.ripple .rp { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: rp .6s linear; pointer-events: none; }
@keyframes rp { to { transform: scale(4); opacity: 0; } }
.b6 { background: none; color: #f72585; border-radius: 0; }
.b6::before, .b6::after { content: ""; position: absolute; width: 0; height: 0; border: 2px solid transparent; transition: width .3s, height .3s .3s; }
.b6::before { top: 0; left: 0; } .b6::after { bottom: 0; right: 0; }
.b6:hover::before { width: 100%; height: 100%; border-top-color: #f72585; border-right-color: #f72585; transition: width .3s, height .3s .3s; }
.b6:hover::after { width: 100%; height: 100%; border-bottom-color: #f72585; border-left-color: #f72585; transition: width .3s .6s, height .3s .9s; }
.b7 { background: #3a0ca3; }
.b7::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); }
.b7:hover::after { left: 130%; transition: left .7s; }
.b8 { background: #06d6a0; color: #073b4c; padding-left: 30px; transition: padding .3s; }
.b8 i { position: absolute; left: -20px; font-style: normal; transition: left .3s; }
.b8:hover { padding-left: 48px; } .b8:hover i { left: 20px; }
.b9 { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); border-radius: 99px; transition: .3s; }
.b9:hover { background: rgba(255,255,255,.22); transform: scale(1.06); }
.b10 { background: #ef476f; width: 170px; transition: width .4s, border-radius .4s; }
.b10.load { width: 52px; border-radius: 50%; padding: 14px 0; }
.b10.load span { display: none; }
.b10.load::after { content: ""; display: block; width: 20px; height: 20px; margin: 0 auto; border: 3px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.b10.ok { background: #06d6a0; }
.b10.ok::after { content: "✓"; border: 0; animation: none; width: auto; height: auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.b11 { background: #ff006e; border-radius: 99px; animation: pulse 1.6s infinite; overflow: visible; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,0,110,.7); } 100% { box-shadow: 0 0 0 22px rgba(255,0,110,0); } }
.b12 { width: 64px; height: 64px; border-radius: 50%; padding: 0; font-size: 1.8rem; background: #2a2c50; color: #888; transition: .2s; overflow: visible; }
.b12.on { color: #ff2e63; animation: like .45s; }
@keyframes like { 50% { transform: scale(1.35); } }
.burst { position: absolute; width: 8px; height: 8px; border-radius: 50%; left: 28px; top: 28px; pointer-events: none; animation: burst .6s forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

// Ripple, loading download button and like burst
document.querySelectorAll('.ripple').forEach(function (b) {
  b.addEventListener('click', function (e) {
    var r = b.getBoundingClientRect(), s = Math.max(r.width, r.height), d = document.createElement('span');
    d.className = 'rp'; d.style.width = d.style.height = s + 'px';
    d.style.left = e.clientX - r.left - s / 2 + 'px'; d.style.top = e.clientY - r.top - s / 2 + 'px';
    b.appendChild(d); setTimeout(function () { d.remove(); }, 600);
  });
});
var dl = document.getElementById('dl');
dl.onclick = function () {
  if (dl.classList.contains('load')) return;
  dl.classList.add('load');
  setTimeout(function () { dl.classList.add('ok'); }, 1600);
  setTimeout(function () { dl.classList.remove('load', 'ok'); }, 3200);
};
var like = document.getElementById('like');
like.onclick = function () {
  like.classList.toggle('on');
  if (!like.classList.contains('on')) return;
  for (var i = 0; i < 10; i++) {
    var p = document.createElement('i'), a = i / 10 * Math.PI * 2;
    p.className = 'burst'; p.style.background = ['#ff2e63', '#ffd166', '#06d6a0', '#4cc9f0'][i % 4];
    p.style.setProperty('--dx', Math.cos(a) * 45 + 'px'); p.style.setProperty('--dy', Math.sin(a) * 45 + 'px');
    like.appendChild(p); (function (q) { setTimeout(function () { q.remove(); }, 600); })(p);
  }
};

Comments 0

…