Button & Hover Animation Style Guide

A visual reference for buttons, icons and text with the animation techniques layered on top for Hover effects. Each section is interactive — hover to see the animations in action.

Slide Up on Hover

Lorem IpsumLorem Ipsum
Dolor Sit Amet
<Button>
    <SlideUpOnGroupHover>Button</SlideUpOnGroupHover>
</Button>
 
<span className={slideUpOnHoverGroupClassName}>
    <SlideUpOnGroupHover> <RiCommandLine /> </SlideUpOnGroupHover>
</span>
 
<span className={slideUpOnHoverGroupClassName}>
    <SlideUpOnGroupHover>Lorem Ipsum</SlideUpOnGroupHover>
</span>

Rotate on Hover

Lorem IpsumLorem Ipsum
Dolor Sit Amet
<Button>
  <RotateOnGroupHover>Button</RotateOnGroupHover>
</Button>
 
<span className={rotateOnHoverGroupClassName}>
  <RotateOnGroupHover>
    <RiCommandLine />
  </RotateOnGroupHover>
</span>
 
<span className={rotateOnHoverGroupClassName}>
  <RotateOnGroupHover>Lorem Ipsum</RotateOnGroupHover>
</span>

Expand on Hover

// Text expands padding on hover
<Button>
  <ExpandOnGroupHover>Lorem Ipsum</ExpandOnGroupHover>
</Button>
 
// Icon slides to the the right
<Button>
  <ExpandOnGroupHover position="left">
    <RiArrowRightLine />
  </ExpandOnGroupHover>
  Slide Text
</Button>
 
// Text slides to the right
<Button>
  Slide Icon
  <ExpandOnGroupHover position="right">
    <RiCommandLine />
  </ExpandOnGroupHover>
</Button>
 
// Text slides to left - button is left-aligned
<Button className="ml-auto">
    Slide text to the left
  <ExpandOnGroupHover position="right">
    <RiCommandLine size={16} />
  </ExpandOnGroupHover>
</Button>

Animated Underline

Lorem Ipsum
<Button>
  <span className="hover-underline">Button</span>
</Button>
 
<span className="hover-underline">
  <RiCommandLine />
</span>
 
<span className="hover-underline">Lorem Ipsum</span>

Confetti on Click - Framer Motion

import { ConfettiButton } from '@/animations';
import { Button } from '@/ui/components/button/button';
 
<ConfettiButton>
  <Button>Click for confetti!</Button>
</ConfettiButton>
 
<ConfettiButton>
  <Button variant="secondary" icon={<RiHeartLine />}>
    Like
  </Button>
</ConfettiButton>

Content Swap on Click - Framer Motion

## Switch Button
<ClickContentSwap statusLabel="Changes saved">
    <Button variant="primary">Save changes</Button>
    <Button icon={<RiThumbUpLine size={18} />} variant="primary">
    Saved!
    </Button>
</ClickContentSwap>
 
<ClickContentSwap statusLabel="Liked" duration={2000}>
    <Button variant="secondary" icon={<RiThumbUpLine size={18} />}>
    Like this
    </Button>
    <Button variant="secondary" icon={<RiThumbUpLine size={18} />}>
    Liked!
    </Button>
</ClickContentSwap>
 
## Switch Text inside Button
<Button variant="primary" icon={<RiThumbUpLine size={18} />}>
    <ClickContentSwap statusLabel="Liked" duration={2000}>
        <span>Like this</span>
        <span>Liked!</span>
    </ClickContentSwap>
</Button>
 
<Button variant="primary">
    <ClickContentSwap statusLabel="Liked" duration={2000}>
    <span className="inline-flex items-center gap-2">
        <RiThumbUpLine size={18} />
        Like this
    </span>
    <span className="inline-flex items-center gap-2">
        <RiThumbUpLine size={18} /> Liked!
    </span>
    </ClickContentSwap>
</Button>