3D Button Component

This page documents the Button3d component—a visually striking 3D-styled button for React applications. It includes instructions for installation, usage, customization, and how to enable the interactive sound effect.

Overview

The Button3d component renders an accessible, customizable 3D button with an optional click sound effect. This is perfect for enhancing UX with tactile feedback.

Installation

First, ensure you have use-sound and clsx installed in your project:

npm install use-sound clsx

Copy the Button3d.tsx component (see code below) into your project, e.g., at src/components/Examples/Button3d.tsx.

You will also need the sound effect file. Download the PopUpOff.mp3 below and place it in your /public/sound/ folder so its path is /sound/PopUpOff.mp3 in your Next.js or React app.

Download sound effect:

Download PopUpOff.mp3

Component Source

Button3d

'use client'

import { MouseEvent, ComponentProps, useCallback, useMemo } from "react";
import clsx from "clsx";
import useSound from "use-sound";

type ButtonVariant = "green" | "red";

interface Button3dProps
    extends Omit<ComponentProps<"button">, "sound" | "variant"> {
    sound?: boolean;
    variant?: ButtonVariant;
}

const Button3d = ({
    sound = true,
    variant = "green",
    disabled = false,
    children,
    className,
    onClick,
    ...rest
}: Button3dProps) => {
    const [play] = useSound("/sound/PopUpOff.mp3", {
        soundEnabled: sound,
        interrupt: true,
    });

    const buttonClass = useMemo(
        () =>
            clsx(
                "rounded-xl border-none p-0 cursor-pointer outline-offset-4",
                {
                    "bg-[#0c9b00]": variant === "green",
                    "bg-[#a30036]": variant === "red",
                },
                "disabled:bg-[#546178] disabled:cursor-default",
                className
            ),
        [variant, className]
    );

    const frontClass = useMemo(
        () =>
            clsx(
                "block px-10 py-3 rounded-xl text-xl text-white font-components font-semibold -translate-y-1.5 transition-transform duration-200 ease-out",
                {
                    "bg-[#00e701]": variant === "green",
                    "bg-[#f0003c]": variant === "red",
                    "active:-translate-y-0.5": !disabled,
                    "!translate-y-0.5 !bg-[#7883a1]": disabled,
                }
            ),
        [variant, disabled]
    );

    const handleClick = useCallback(
        (e: MouseEvent<HTMLButtonElement>) => {
            if (disabled) {
                e.preventDefault();
                return;
            }

            if (sound) play();
            onClick?.(e);
        },
        [disabled, sound, play, onClick]
    );

    return (
        <button
            type="button"
            className={buttonClass}
            onClick={handleClick}
            disabled={disabled}
            {...rest}
        >
            <span className={frontClass}>{children}</span>
        </button>
    );
};

export default Button3d;

Usage

Once imported, you can use the button like this:

import Button3d from '@/components/Examples/Button3d'

<Button3d>Click me</Button3d>

Props

NameTypeDefaultDescription
soundbooleantrueEnable or disable click sound playback
variant'green' or 'red''green'Visual color style: green or red
...restAll standard button props—Other native button attributes (e.g. onClick, disabled)

Examples

<Button3d variant="green">Confirm</Button3d>

<Button3d variant="red" sound={false}>Delete</Button3d>

<Button3d disabled>Disabled</Button3d>

Sound Resource

To enable sound feedback, ensure /sound/PopUpOff.mp3 exists.
Download the sample sound here: Download PopUpOff.mp3

You can optionally replace this file with any other .mp3 file—just make sure the path in the code matches its location.

Accessibility

  • Fully keyboard accessible
  • disabled prop works as expected
  • Semantic HTML button element
Explore the Playing Card component

What's next?

Was this page helpful?