SearchF
April 8, 2026/Simple/Buttons

Button Bubble Arrow

On hover, a leading arrow circle scales in from the left while the duplicate arrow on the right scales out. The label slides from behind the right arrow using a translateX transition. Pure CSS.

Live Demo ↗

Preview

View Work
Get in Touch
See Lab

Source

import BtnBubbleArrow from "./index.jsx";
import { btnBubbleArrow } from "../demo-data.js";
import styles from "./demo.module.css";

export default function BtnBubbleArrowDemo() {
  return (
    <div className={styles.demo}>
      <div className={styles.hero}>
        <p className={styles.label}>No. 5 Studio</p>
        <h1 className={styles.heading}>Ready to start<br />a project?</h1>
        <BtnBubbleArrow {...btnBubbleArrow} />
      </div>
    </div>
  );
}