Docs
→
Button
→
Cwickable Button

Cwickable Button

A chunky, pressable card-style button with subtle depth and inner light play.

by Sarthak Kapila

Installation

Usage

Cwickable Button Example

1import Cwickablebutton from "@/components/cwickable";
2

3export default function Example() {
4  return (
5    <div className="p-6 bg-[#212121] rounded-3xl">
6      <Cwickablebutton className="p-3">
7        <img src="/favicon.ico" alt="icon" width={20} height={20} />
8      </Cwickablebutton>
9    </div>
10  );
11}

Understanding the component

The button uses an outer container with a soft drop shadow and border. On press, the content shifts down slightly and the inner overlay swaps its top/bottom borders to simulate a sunken state. This creates a convincing tactile feel using only CSS and a small React state.

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content placed inside the button (icon, text, etc.).
classNamestring-Optional classes to control padding/size/appearance.
onClick() => void-Click handler for the button.