Element•Premium

Soft Press Button

A glossy textured cushion with pointer-driven vertical creases and a deep recessed press.

Customize

TextWidth340Height104Fold intensity1Press depth12

Overview

About the Soft Press Button

A glossy textured cushion with pointer-driven vertical creases and a deep recessed press. It is delivered as editable TypeScript for React. Instance-scoped CSS; no Tailwind or animation dependencies. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Tactile calls to action and expressive contact buttons.

What’s included

Files in the product ZIP

Soft Press Button source

components/soft-press-button.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { SoftPressButton } from "@/components/soft-press-button";

Minimum example

<SoftPressButton text="Contact" foldIntensity={1} pressDepth={12} />

Props

Component API

Prop	Type	Default	Description
text	string	Contact	Button label.
textColor	string	#e4d3b2	Text and arrow color.
width	number	340	Width, 140–700px, constrained by parent.
height	number	104	Height, 60–180px.
foldIntensity	number	1	Crease strength, 0–2.
pressDepth	number	12	Depression depth, 0–24.
textureSrc	string	Embedded textile image	Optional replacement material image URL. Copy soft-press-material.ts alongside the component.
showArrow	boolean	true	Decorative arrow visibility.
...buttonProps	ButtonHTMLAttributes<HTMLButtonElement>	—	Native events, disabled, children, className, style and accessibility attributes.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Instance-scoped CSS; no Tailwind or animation dependencies.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Soft Press Button ZIP, place the source file at src/components/soft-press-button.tsx, and copy the example into your own page or feature folder.

Target path

src/components/soft-press-button.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Copy components/soft-press-button.tsx and import SoftPressButton. Keep use client for Next.js App Router.
Native button supports keyboard, disabled and click events. Reduced motion disables transitions.
Includes an embedded AI-generated padded textile material. Copy soft-press-material.ts with the component; no external image hosting required.