Components / Valorant Button

Valorant Button

Gaming-inspired buttons with four unique hover effect variants. Features customizable hue rotation for infinite color options, dynamic animations, and the iconic Valorant aesthetic. Perfect for gaming UIs and bold interfaces.

Effect Variants

Four distinct hover effects. Hover over each button to see the animation.

Default

Classic slice effect with squiggle animation

variant="default"

Liquid

Smooth, morphing liquid wave layers

variant="liquid"

Neon

Glowing, flickering neon sign effect

variant="neon"

Warp

High-speed light streak effect

variant="warp"

Tip: Hover over each button to see its unique animation effect.

Color Variations

Use the buttonColor prop (0-360 hue value) to create any color.

hue: 0°

hue: 120°

hue: 240°

hue: 300°

Usage

tsx

import ValorantButton from "@/components/valorant-button/valorant-btn"

export function Example() {
  return (
    <ValorantButton
      text="JOIN NOW"
      buttonColor={0}        // Hue value 0-360
      textColor="#fff"
      variant="default"      // 'default' | 'liquid' | 'neon' | 'warp'
      onClick={() => console.log("clicked")}
    />
  )
}

Props

Prop	Type	Description
text	string	Button label text (default: "JOIN NOW")
buttonColor	number	Hue rotation value 0-360 (default: 0)
textColor	string	Text color in any CSS format (default: "#000")
variant	'default' \| 'liquid' \| 'neon' \| 'warp'	Hover effect variant (default: 'default')
onClick	() => void	Click handler function

Features

4 Effect Variants — Default (slice), Liquid (wave), Neon (glow), Warp (streaks)
Infinite Colors — Use hue rotation (0-360) for any color
CSS-Only Animations — No JavaScript for hover effects, pure CSS
Gaming Aesthetic — Bold typography with Anton font
Fully Typed — TypeScript support with exported prop types

Variant Details

Variant	Effect
default	Slice clip-path animation with squiggle shake on hover
liquid	Wavy liquid fill animation that rises on hover
neon	Glowing border with flickering text shadow on hover
warp	Light speed streaks flying through on hover

Dependencies

This component uses pure CSS animations — no external animation libraries required. The Anton font is loaded via Google Fonts in the CSS file.

Source Code

This component requires 3 files. Copy all into your components/valorant-button/ folder.

Note: The CSS file shown is abbreviated. Download the full 470-line CSS file for all animations and effects.

tsx

import { ValorantButtonProps } from "./valorant-playground";
import S from "./valorant.module.css";

export default function ValorantButton({
    text = "JOIN NOW",
    buttonColor = 0,
    textColor = "#000",
    variant = "default",
    ...props
}: ValorantButtonProps) {
    const getVariantClass = () => {
        switch (variant) {
            case 'liquid':
                return S.buttonLiquid;
            case 'neon':
                return S.buttonNeon;
            case 'warp':
                return S.buttonWarp;
            default:
                return S.button;
        }
    };

    return (
        <button
            className={getVariantClass()}
            data-text={text}
            style={{
                '--hue': `${buttonColor}deg`,
                '--text-color': textColor,
                color: textColor,
            } as React.CSSProperties}
            {...props}
        >
            <div />
            <span>{text}</span>
            {variant === 'warp' && (
                <div className={S.warpStreaks}>
                    <i />
                    <i />
                    <i />
                    <i />
                </div>
            )}
        </button>
    );
}