Button – 12 Animated CSS Buttons with Hover Effects

11 0 Buttons codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Button – 12 Animated CSS Buttons with Hover Effects

<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

…

Button – 12 Animated CSS Buttons with Hover Effects

Recommended

Comments 0