←
Tactile 'Smash' Button

Tactile 'Smash' Button

Neo-Brutalist

Neo-brutalist tech button with outer enclosure frame, cushion cooling tray, obsidian core slab, and glowing neon reactor underglow.

Interactive Playground & Studio

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

All Variants & Themes

Click to test interactive spring physics on every theme

Default Neo-Brutalistvariant="default"

1:1 reference design with porcelain enclosure tray & dot matrix.

UI Pirate Magmavariant="orange"

Signature magma orange reactor glow with dark obsidian core.

Dark Obsidian Corevariant="dark"

Stealth midnight enclosure with crisp white chamfer bevels.

Cyberpunk Violetvariant="cyberpunk"

High-voltage ultraviolet illumination with matrix array.

Features & Physics

✓Industrial outer enclosure frame
✓Cushion cooling tray ventilation texture
✓Obsidian core slab with 3D press feel
✓Neon reactor underglow bloom

Code & Integration

Customized live with your active playground prop settings:

"use client";

import React, { useState } from "react";
import { motion } from "framer-motion";

export type SmashButtonVariant = "default" | "dark" | "orange" | "cyberpunk";

export interface SmashTactileButtonProps {
  label?: string;
  variant?: SmashButtonVariant;
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "hero";
  onClick?: () => void;
  className?: string;
  disabled?: boolean;
}

export function SmashTactileButton({
  label = "Smash the button",
  variant = "default",
  size = "md",
  onClick,
  className = "",
  disabled = false,
}: SmashTactileButtonProps) {
  const [isPressed, setIsPressed] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className={`relative inline-block select-none p-3 rounded-[30px] bg-white/65 border border-[#CEC9F1] shadow-2xl ${className}`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setIsPressed(false);
      }}
    >
      <div className="relative p-2 rounded-[24px] bg-[#F3F3FE] shadow-[inset_0_1px_0_white,inset_0_-3px_0_#DFDEFB]">
        <motion.button
          type="button"
          disabled={disabled}
          onClick={onClick}
          onMouseDown={() => setIsPressed(true)}
          onMouseUp={() => setIsPressed(false)}
          animate={{
            y: isPressed ? 3 : isHovered ? -2 : 0,
            scale: isPressed ? 0.98 : 1,
          }}
          transition={{ type: "spring", stiffness: 500, damping: 22 }}
          className="relative px-10 py-4 rounded-[20px] bg-gradient-to-br from-[#1C182F] via-[#161326] to-[#0E0C18] text-white font-bold text-sm tracking-wide cursor-pointer focus:outline-none shadow-xl"
        >
          <span>{label}</span>
        </motion.button>
      </div>
    </div>
  );
}

export default SmashTactileButton;

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"Smash the button"Button text.
variant"default" | "orange" | "dark" | "cyberpunk""default"Industrial theme variant.