20 CSS Animated Buttons 16 / 20

CSS Social Share Buttons Hover

A row of social share icon buttons with brand-colour reveals, floating tooltips, and a URL-copy button that flashes a "Copied!" confirmation on click.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ab-16">
  <p class="ab-16__label">Share this article</p>
  <div class="ab-16__row">
    <button class="ab-16__btn" style="--brand:#1d9bf0" data-tooltip="Twitter / X" aria-label="Share on Twitter">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.26 5.638zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    </button>
    <button class="ab-16__btn" style="--brand:#0a66c2" data-tooltip="LinkedIn" aria-label="Share on LinkedIn">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
    </button>
    <button class="ab-16__btn" style="--brand:#24292f" data-tooltip="GitHub" aria-label="Share on GitHub">
      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
    </button>
    <button class="ab-16__btn ab-16__copy" id="ab-16-copy" style="--brand:#7c3aed" data-tooltip="Copy Link" aria-label="Copy link">
      <svg class="ab-16__copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
    </button>
  </div>
</div>
.ab-16,.ab-16 *,.ab-16 *::before,.ab-16 *::after{box-sizing:border-box;margin:0;padding:0}
.ab-16 ::selection{background:#7c3aed;color:#fff}
.ab-16{
  font-family:system-ui,sans-serif;
  background:#f8fafc;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:2rem;
}
.ab-16__label{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
}
.ab-16__row{
  display:flex;
  gap:.75rem;
}
.ab-16__btn{
  --brand:#1e293b;
  position:relative;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:#1e293b;
  color:#e2e8f0;
  border:none;
  border-radius:10px;
  cursor:pointer;
  outline:none;
  transition:background .25s,color .25s,transform .2s,box-shadow .25s;
}
.ab-16__btn svg{width:18px;height:18px;pointer-events:none}
.ab-16__btn:hover{
  background:var(--brand);
  color:#fff;
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.ab-16__btn:active{transform:translateY(0)}
.ab-16__btn::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%) translateY(4px);
  background:#1e293b;
  color:#f1f5f9;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
  padding:.3rem .6rem;
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s,transform .2s;
}
.ab-16__btn:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.ab-16__copy.is-copied{background:#059669 !important;color:#fff;transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){
  .ab-16__btn{transition:background .1s,color .1s}
  .ab-16__btn::after{transition:none}
}
(function(){
  var copyBtn=document.getElementById('ab-16-copy');
  if(!copyBtn)return;
  copyBtn.addEventListener('click',function(){
    var url=window.location.href;
    if(navigator.clipboard){
      navigator.clipboard.writeText(url).then(showCopied).catch(function(){fallbackCopy(url)});
    }else{fallbackCopy(url)}
  });
  function showCopied(){
    copyBtn.classList.add('is-copied');
    copyBtn.dataset.tooltip='Copied!';
    setTimeout(function(){
      copyBtn.classList.remove('is-copied');
      copyBtn.dataset.tooltip='Copy Link';
    },1500);
  }
  function fallbackCopy(url){
    var t=document.createElement('textarea');
    t.value=url;t.style.position='fixed';t.style.opacity='0';
    document.body.appendChild(t);t.select();
    try{document.execCommand('copy');showCopied();}catch(e){}
    document.body.removeChild(t);
  }
})();

How this works

Each social button has a CSS variable --brand set per button. In the resting state, icons display in a neutral dark fill. On :hover, a transition: background .25s, color .25s, transform .2s shifts the background to var(--brand) and lifts the button via translateY(-3px). The tooltip is an absolutely-positioned ::after pseudo-element containing the platform name via content: attr(data-tooltip), hidden by opacity: 0; transform: translateY(4px) at rest and revealed on parent hover — no extra HTML required.

The copy button uses the navigator.clipboard.writeText() API. On success, JS adds a .is-copied class that transitions the button colour to green and swaps the icon to a checkmark via a CSS content swap on a data attribute. After 1.5 s the class is removed, reverting the visual state. The tooltip updates to "Copied!" via JS mutating data-tooltip, matching the visual feedback without a separate element.

Customize

  • Add a new social platform by copying an existing button, setting a new --brand hex and data-tooltip, and adding the platform's SVG path inside the icon slot.
  • Change the tooltip position from top to bottom by swapping bottom: calc(100% + 8px) to top: calc(100% + 8px) and inverting the translateY values on the pseudo-element.
  • Make the tooltip persist on touch by toggling a .tooltip-visible class on tap via JS in addition to the CSS :hover trigger.
  • Animate the row into view on page load by adding a staggered @keyframes ab-16-rise with increasing animation-delay per button.
  • Use window.open() in JS to implement real sharing URLs for Twitter/X and LinkedIn by constructing the share URL with encodeURIComponent(document.URL).

Watch out for

  • navigator.clipboard.writeText() requires a secure context (HTTPS or localhost) — on HTTP pages the copy button will silently fail; add a try/catch and fall back to document.execCommand("copy") via a temp textarea.
  • The tooltip content: attr(data-tooltip) approach works but the pseudo-element width is auto — long tooltip text can overflow the viewport on mobile; cap with max-width: 120px; white-space: nowrap.
  • Brand colours are set as inline CSS variables on each button element — if the buttons are rendered dynamically from a CMS, ensure the style attribute is allowed in your CSP and sanitization rules.

Browser support

ChromeSafariFirefoxEdge
66+ 13.1+ 63+ 66+

navigator.clipboard requires HTTPS; attr() in content() is universally supported.

More from 20 CSS Animated Buttons

CSS Background Slide Hover ButtonCSS Pure CSS Ripple Effect ButtonCSS Animated Border Draw ButtonCSS 3D Press Effect ButtonCSS Liquid Fill Button AnimationCSS Moving Gradient CTA ButtonCSS Shine Sweep Hover ButtonCSS Jelly Bounce Button AnimationCSS Text Flip Button HoverCSS Animated CTA Hero ButtonCSS Submit Button Success StateCSS Animated Download Button
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →