Open demo

CSS code

HTML 
<button type="button" class="ib ib-lead">Continue <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
<button type="button" class="ib ib-dl"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></svg> Download</button>
<button type="button" class="ib ib-round" aria-label="Settings"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
<button type="button" class="ib ib-fab" aria-label="Add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button type="button" class="ib ib-like" aria-pressed="false" data-like><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.5-9.2C1.1 8.4 3.3 4.5 7 4.5c2.1 0 3.6 1.1 5 2.8 1.4-1.7 2.9-2.8 5-2.8 3.7 0 5.9 3.9 4.5 7.3C19.5 16.4 12 21 12 21z"/></svg><span class="ib-sr">Like</span> <span data-count>128</span></button>
CSS 
/* Icon buttons: inline SVG icons (aria-hidden) that move on hover; icon-only buttons are named with aria-label. */
.ib{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:.92rem;font-weight:700;
  line-height:1.25;cursor:pointer;transition:transform .16s,background-color .16s,border-color .16s,box-shadow .16s,color .16s}
.ib svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib:focus-visible{outline:2px solid #111827;outline-offset:3px}
.ib-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ib-lead{border:0;background:#111827;color:#fff;padding:13px 26px;border-radius:12px}
.ib-lead svg{transition:transform .2s}
.ib-lead:hover svg{transform:translateX(4px)}
.ib-dl{border:1.5px solid #858c98;background:#fff;color:#111827;padding:13px 24px;border-radius:12px}
.ib-dl:hover{border-color:#111827}
.ib-dl svg{transition:transform .25s}
.ib-dl:hover svg{transform:translateY(3px)}
.ib-round{width:52px;height:52px;padding:0;border:1.5px solid #858c98;border-radius:50%;background:#fff;color:#111827}
.ib-round svg{width:22px;height:22px;stroke-width:1.8}
.ib-round:hover{border-color:#111827;transform:rotate(12deg)}
.ib-fab{width:60px;height:60px;padding:0;border:0;border-radius:18px;background:#e11d48;color:#fff;box-shadow:0 12px 26px -8px rgba(225,29,72,.55)}
.ib-fab svg{width:26px;height:26px;stroke-width:2.4}
.ib-fab:hover{transform:translateY(-3px) rotate(90deg);box-shadow:0 18px 34px -10px rgba(225,29,72,.6)}
.ib-like{gap:9px;border:1.5px solid #f43f5e;border-radius:999px;background:#fff;color:#e11d48;padding:12px 22px}
.ib-like svg{width:16px;height:16px;fill:currentColor;stroke:none}
.ib-like[aria-pressed="true"]{background:#e11d48;border-color:#e11d48;color:#fff}
.ib-like [data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ib,.ib svg{transition:none}.ib:hover,.ib:hover svg{transform:none}}
JavaScript 
/* Like toggle: flips aria-pressed and moves the count by one. */
document.querySelectorAll("[data-like]").forEach(function (btn) {
  var count = btn.querySelector("[data-count]");
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") !== "true";
    btn.setAttribute("aria-pressed", String(on));
    count.textContent = Number(count.textContent) + (on ? 1 : -1);
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<button type="button" class="btn btn-ic btn-ic-lead d-inline-flex align-items-center">Continue <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
<button type="button" class="btn btn-ic btn-ic-dl d-inline-flex align-items-center"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></svg> Download</button>
<button type="button" class="btn btn-ic btn-ic-round rounded-circle d-inline-flex align-items-center justify-content-center" aria-label="Settings"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
<button type="button" class="btn btn-ic btn-ic-fab d-inline-flex align-items-center justify-content-center" aria-label="Add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
<button type="button" class="btn btn-ic btn-ic-like rounded-pill d-inline-flex align-items-center" aria-pressed="false" data-like><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7.5-4.6-9.5-9.2C1.1 8.4 3.3 4.5 7 4.5c2.1 0 3.6 1.1 5 2.8 1.4-1.7 2.9-2.8 5-2.8 3.7 0 5.9 3.9 4.5 7.3C19.5 16.4 12 21 12 21z"/></svg><span class="visually-hidden">Like</span> <span data-count>128</span></button>
CSS 
/* .btn with d-inline-flex utilities; colours per variant through --bs-btn-* variables, icons are aria-hidden inline SVG. */
.btn-ic{--bs-btn-padding-x:26px;--bs-btn-padding-y:13px;--bs-btn-font-size:.92rem;--bs-btn-font-weight:700;--bs-btn-line-height:1.25;
  --bs-btn-border-radius:12px;--bs-btn-focus-box-shadow:none;
  gap:10px;transition:transform .16s,background-color .16s,border-color .16s,box-shadow .16s,color .16s}
.btn-ic svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ic:focus-visible{outline:2px solid #111827;outline-offset:3px}
.btn-ic-lead{--bs-btn-border-width:0;--bs-btn-color:#fff;--bs-btn-bg:#111827;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#111827;--bs-btn-active-color:#fff;--bs-btn-active-bg:#111827}
.btn-ic-lead svg{transition:transform .2s}
.btn-ic-lead:hover svg{transform:translateX(4px)}
.btn-ic-dl,.btn-ic-round{--bs-btn-padding-x:24px;--bs-btn-border-width:1.5px;--bs-btn-color:#111827;--bs-btn-bg:#fff;--bs-btn-border-color:#858c98;
  --bs-btn-hover-color:#111827;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#111827;
  --bs-btn-active-color:#111827;--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#111827}
.btn-ic-dl svg{transition:transform .25s}
.btn-ic-dl:hover svg{transform:translateY(3px)}
.btn-ic-round{--bs-btn-padding-x:0;--bs-btn-padding-y:0;width:52px;height:52px}
.btn-ic-round svg{width:22px;height:22px;stroke-width:1.8}
.btn-ic-round:hover{transform:rotate(12deg)}
.btn-ic-fab{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-width:0;--bs-btn-border-radius:18px;
  --bs-btn-color:#fff;--bs-btn-bg:#e11d48;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#e11d48;--bs-btn-active-color:#fff;--bs-btn-active-bg:#e11d48;
  width:60px;height:60px;box-shadow:0 12px 26px -8px rgba(225,29,72,.55)}
.btn-ic-fab svg{width:26px;height:26px;stroke-width:2.4}
.btn-ic-fab:hover{transform:translateY(-3px) rotate(90deg);box-shadow:0 18px 34px -10px rgba(225,29,72,.6)}
.btn-ic-like{--bs-btn-padding-x:22px;--bs-btn-padding-y:12px;--bs-btn-border-width:1.5px;
  --bs-btn-color:#e11d48;--bs-btn-bg:#fff;--bs-btn-border-color:#f43f5e;
  --bs-btn-hover-color:#e11d48;--bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#f43f5e;
  --bs-btn-active-color:#e11d48;--bs-btn-active-bg:#fff;--bs-btn-active-border-color:#f43f5e;gap:9px}
.btn-ic-like[aria-pressed="true"]{--bs-btn-color:#fff;--bs-btn-bg:#e11d48;--bs-btn-border-color:#e11d48;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#e11d48;--bs-btn-hover-border-color:#e11d48;
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#e11d48;--bs-btn-active-border-color:#e11d48}
.btn-ic-like svg{width:16px;height:16px;fill:currentColor;stroke:none}
.btn-ic-like [data-count]{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.btn-ic,.btn-ic svg{transition:none}.btn-ic:hover,.btn-ic:hover svg{transform:none}}
JavaScript 
/* Like toggle: flips aria-pressed and moves the count by one. */
document.querySelectorAll("[data-like]").forEach(function (btn) {
  var count = btn.querySelector("[data-count]");
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") !== "true";
    btn.setAttribute("aria-pressed", String(on));
    count.textContent = Number(count.textContent) + (on ? 1 : -1);
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<button type="button" class="group cursor-pointer inline-flex items-center justify-center gap-2.5 text-[.92rem] leading-[1.25] font-bold transition-[translate,rotate,background-color,border-color,box-shadow,color] duration-[160ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#111827] motion-reduce:transition-none rounded-xl bg-[#111827] px-[26px] py-[13px] text-white">Continue <svg viewBox="0 0 24 24" aria-hidden="true" class="size-[18px] shrink-0 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-transform duration-200 group-hover:translate-x-1 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
<button type="button" class="group cursor-pointer inline-flex items-center justify-center gap-2.5 text-[.92rem] leading-[1.25] font-bold transition-[translate,rotate,background-color,border-color,box-shadow,color] duration-[160ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#111827] motion-reduce:transition-none rounded-xl border-[1.5px] border-[#858c98] bg-white px-6 py-[13px] text-[#111827] hover:border-[#111827]"><svg viewBox="0 0 24 24" aria-hidden="true" class="size-[18px] shrink-0 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] transition-transform duration-[250ms] group-hover:translate-y-[3px] motion-reduce:transition-none motion-reduce:group-hover:translate-y-0"><path d="M12 4v11M7 11l5 5 5-5M5 20h14"/></svg> Download</button>
<button type="button" class="cursor-pointer inline-flex items-center justify-center gap-2.5 text-[.92rem] leading-[1.25] font-bold transition-[translate,rotate,background-color,border-color,box-shadow,color] duration-[160ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#111827] motion-reduce:transition-none size-[52px] rounded-full border-[1.5px] border-[#858c98] bg-white text-[#111827] hover:rotate-12 hover:border-[#111827] motion-reduce:hover:rotate-0" aria-label="Settings"><svg viewBox="0 0 24 24" aria-hidden="true" class="size-[22px] shrink-0 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] stroke-[1.8]"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
<button type="button" class="cursor-pointer inline-flex items-center justify-center gap-2.5 text-[.92rem] leading-[1.25] font-bold transition-[translate,rotate,background-color,border-color,box-shadow,color] duration-[160ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#111827] motion-reduce:transition-none size-[60px] rounded-[18px] bg-[#e11d48] text-white shadow-[0_12px_26px_-8px_rgba(225,29,72,.55)] hover:-translate-y-[3px] hover:rotate-90 hover:shadow-[0_18px_34px_-10px_rgba(225,29,72,.6)] motion-reduce:hover:translate-y-0 motion-reduce:hover:rotate-0" aria-label="Add"><svg viewBox="0 0 24 24" aria-hidden="true" class="size-[26px] shrink-0 fill-none stroke-current stroke-[2.2] [stroke-linecap:round] [stroke-linejoin:round] stroke-[2.4]"><path d="M12 5v14M5 12h14"/></svg></button>
<button type="button" class="cursor-pointer inline-flex items-center justify-center text-[.92rem] leading-[1.25] font-bold transition-[translate,rotate,background-color,border-color,box-shadow,color] duration-[160ms] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#111827] motion-reduce:transition-none gap-[9px] rounded-full border-[1.5px] border-[#f43f5e] bg-white px-[22px] py-3 text-[#e11d48] aria-pressed:border-[#e11d48] aria-pressed:bg-[#e11d48] aria-pressed:text-white" aria-pressed="false" data-like><svg viewBox="0 0 24 24" aria-hidden="true" class="size-4 shrink-0 fill-current"><path d="M12 21s-7.5-4.6-9.5-9.2C1.1 8.4 3.3 4.5 7 4.5c2.1 0 3.6 1.1 5 2.8 1.4-1.7 2.9-2.8 5-2.8 3.7 0 5.9 3.9 4.5 7.3C19.5 16.4 12 21 12 21z"/></svg><span class="sr-only">Like</span> <span class="tabular-nums" data-count>128</span></button>
JavaScript 
/* Like toggle: flips aria-pressed and moves the count by one. */
document.querySelectorAll("[data-like]").forEach(function (btn) {
  var count = btn.querySelector("[data-count]");
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") !== "true";
    btn.setAttribute("aria-pressed", String(on));
    count.textContent = Number(count.textContent) + (on ? 1 : -1);
  });
});

About this set

Five buttons that pair or replace a label with an inline SVG icon. Continue has a trailing arrow that slides 4 pixels right on hover, and Download has a leading arrow that drops 3 pixels. The round Settings button tilts 12 degrees, and the square floating action button, Add, lifts 3 pixels and rotates a quarter turn. The last one is a like toggle: a pill with a heart and a counter that fills red when pressed and moves the count up or down by one. Use the labelled buttons for primary and secondary actions, the round and floating ones in toolbars and on mobile screens, and the like toggle anywhere users react to content. Icons are stroke SVGs that take currentColor, so they follow the button’s text colour, and all of them are hidden from assistive technology. The like toggle is the only part that uses JavaScript: a few lines flip aria-pressed and update the number, and CSS styles the pressed state from that attribute. The outline borders reach 3:1 against the page. The Bootstrap version uses d-inline-flex, rounded-circle, rounded-pill and visually-hidden.

What’s included

  • Arrow, download, settings, add and heart icons as inline SVG
  • Icon-only buttons named with aria-label
  • Like toggle with aria-pressed and a live count
  • Outline borders darkened to 3:1 against the page
  • Hover movements and transitions off under reduced motion

Accessibility

The icon-only buttons are named Settings and Add through aria-label, every SVG is aria-hidden, and the like button's name is Like plus its count, with aria-pressed reporting whether it is on. All five are native buttons reachable with Tab and operated with Enter or Space, and focus draws a 2px dark outline. Under prefers-reduced-motion the icons and buttons no longer move or animate.

Customise it

In plain CSS change the colours on .ib-lead, .ib-dl, .ib-round, .ib-fab and .ib-like, and the SVG size in .ib svg. In Bootstrap set the --bs-btn-* colour variables on the .btn-ic-* classes; in Tailwind edit the bg-, border-, text- and aria-pressed: utilities.