NewCSS + small JS · transform · custom properties

Arrow Slide

A small arrow in a circle stretches into a full fill as the arrow runs across to the other side.

A free arrow button hover effect in HTML and CSS (with a few lines of JavaScript). Also known as call-to-action arrow animation, expanding circle button, arrow slide CTA or next button animation.

Class: .CCArrow
Weight: 1.7 KB
Needs: CSS + a few lines of JS
Best for: Next steps, 'Book now', 'Shop the range'

Tune it

Every snippet on this page follows these settings.

How the Arrow Slide hover effect works

Script adds an arrow icon and measures the element into --w and --h.
::before is a circle the height of the element, sitting behind the arrow on the left.
On hover the circle stretches to the full width, the arrow slides to the far end and the padding swaps sides.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCArrow">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Arrow Slide on button.

More ways to use it

The same class on badge.

The Arrow Slide code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCArrow {
  position: relative;
  isolation: isolate;
  padding-left: calc(var(--h, 44px) + .7em);
  transition: color calc(.35s / var(--cc-speed)), padding calc(.35s / var(--cc-speed));
}
.CCArrow::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 5px;
  z-index: -1;
  width: calc(var(--h, 44px) - 10px);
  border-radius: 999px;
  background: var(--cc-accent);
  transition: width calc(.45s / var(--cc-speed)) cubic-bezier(.6, 0, .2, 1);
}
.CCArrow .CCArrow-i {
  position: absolute;
  left: 5px;
  top: 50%;
  width: calc(var(--h, 44px) - 10px);
  display: grid;
  place-items: center;
  color: var(--cc-on-accent);
  transform: translateY(-50%);
  transition: transform calc(.45s / var(--cc-speed)) cubic-bezier(.6, 0, .2, 1);
}
.CCArrow:hover,
.CCArrow:focus-visible { color: var(--cc-on-accent); padding-left: 1.55em; padding-right: calc(var(--h, 44px) + .7em); }
.CCArrow:hover::before,
.CCArrow:focus-visible::before { width: calc(100% - 10px); }
.CCArrow:hover .CCArrow-i,
.CCArrow:focus-visible .CCArrow-i { transform: translate(calc(var(--w, 140px) - var(--h, 44px)), -50%); }
@media (prefers-reduced-motion: reduce) { .CCArrow, .CCArrow::before, .CCArrow .CCArrow-i { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCArrow").forEach(function (el) {
  if (el.dataset.ccArrow) return; el.dataset.ccArrow = 1;
  el.insertAdjacentHTML("afterbegin", '<span class="CCArrow-i" aria-hidden="true"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>');
  function size() { el.style.setProperty("--w", el.offsetWidth + "px"); el.style.setProperty("--h", el.offsetHeight + "px"); }
  size();
  if (window.ResizeObserver) new ResizeObserver(size).observe(el);
});

Pairs well with

Avoid on the same element Moonrise (::before), Spotlight (::before), Liquid Fill (::before, fill), Ink Pour (::before, fill), Northern Lights (fill), Stack Pop (fill), Metal (fill), Sonar (::before), Grain (fill), Pixel (fill), Goo (fill).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

The arrow is decorative and hidden from screen readers.
Plays on keyboard focus too.
No transitions under reduced motion.

Performance

1.7 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Arrow Slide

What is a arrow button hover effect?

A small arrow in a circle stretches into a full fill as the arrow runs across to the other side. Arrow Slide is a free arrow button hover effect, also known as call-to-action arrow animation or expanding circle button, that works on buttons and more.

How do you make a arrow button hover effect in CSS?

Script adds an arrow icon and measures the element into --w and --h. ::before is a circle the height of the element, sitting behind the arrow on the left. On hover the circle stretches to the full width, the arrow slides to the far end and the padding swaps sides.

How do I add Arrow Slide to a button?

Add the class CCArrow next to CCButton, inside an element with the CCTheme class, then include the Arrow Slide CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Arrow Slide need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Arrow Slide?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Arrow Slide accessible?

The arrow is decorative and hidden from screen readers. Plays on keyboard focus too. No transitions under reduced motion.

Can I use Arrow Slide in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCArrow to a button or block, and paste the JavaScript into the footer code area.

Is Arrow Slide free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.