←
Join Tactile 3D Button

Join Tactile 3D Button

Backlit 3D Key

Lightweight rebuild of the footer's LETS VENTURE key: grey frame, recessed silver-bezel socket, and a black cap on a visible 3D base with a backlit magma glow behind the label. Nested elements + container-query units instead of a filter-heavy SVG.

Interactive Playground & Studio

Live Controls
join-tactile-button.tsx
Hover or click to interact
Customizer
PRESETS & VARIATIONS

All Variants & Themes

Click to test interactive spring physics on every theme

UI Pirate Magmavariant="orange"

The original footer look — molten orange glow bleeding through the dark face.

Cyan Backlightvariant="dark"

Cooler blue backlight for dark UIs that don't want the orange.

Features & Physics

✓Recessed silver-bezel socket
✓Cap sits on a visible 3D base
✓Backlit magma glow behind the label
✓Container-query fluid — no SVG filters

Code & Integration

Customized live with your active playground prop settings:

"use client";

import * as React from "react";
import { useState, useId } from "react";

export type JoinTactileButtonVariant = "orange" | "dark";
export type JoinTactileButtonState = "interactive" | "standerd" | "hover";
export type JoinTactileButtonSize = "xs" | "sm" | "md" | "lg" | "xl";

export interface JoinTactileButtonProps {
  label?: string;
  variant?: JoinTactileButtonVariant;
  size?: JoinTactileButtonSize;
  stateMode?: JoinTactileButtonState;
  showArrow?: boolean;
  onClick?: () => void;
  className?: string;
  disabled?: boolean;
}

export const JoinTactileButton: React.FC<JoinTactileButtonProps> = ({
  label = "LETS VENTURE.",
  variant = "orange",
  size = "md",
  stateMode = "interactive",
  showArrow = true,
  onClick,
  className = "",
  disabled = false,
}) => {
  return (
    <div className="relative inline-flex items-center justify-center">
      <button type="button" onClick={onClick} disabled={disabled} className={className}>
        {label}
      </button>
    </div>
  );
};

export default JoinTactileButton;

Peer Dependencies

Requires Framer Motion and Tailwind CSS for spring physics and layout tokens:

npm install framer-motion clsx lucide-react tailwind-merge

API & Props Reference

PropTypeDefaultDescription
labelstring"LETS VENTURE"Cap text (rendered uppercase).
variant"orange" | "dark""orange"Backlit glow + edge-lighting colour.
size"xs" | "sm" | "md" | "lg" | "xl""lg"Upper width bound; the button is fluid up to it.
stateMode"interactive" | "standerd" | "hover""interactive"Force a state instead of reacting to the pointer.
showArrowbooleantrueShow the ↗ glyph in the top-right corner.