This makes buttons good

Buttonizer fixes the broken behavior of the CSS :active pseudo-class.

It provides a reliable, input-aware pressed state for buttons and interactive elements—handling mouse, keyboard, and pointer interactions consistently.

It also includes optional hover/focus styling and lightweight click animations for better UI feedback.

Buttonizer

Buttonizer is a small client-side utility for making buttons behave correctly.

It gives you: - A reliable pressed state (that actually matches real user input) - Optional hover / focus / default styles - A simple click animation system.

Why?

The built-in :active pseudo-class is surprisingly flawed:

• ❌ Activates on right-click / middle-click
• ❌ Doesn't activate for keyboard input (Enter/Space)
• ❌ Doesn't reflect real pointer behavior (dragging, cancellation, etc.)

Buttonizer fixes those inconsistencies and gives you a true input-aware pressed state.

Installation

npm install buttonizer

//with bundler:
import buttonizer from 'buttonizer';

//without bundler:
import buttonizer from './node_modules/buttonizer/index.js';

//react:
import { useButtonizer } from "buttonizer/react";

Basic Usage (Vanilla JS)

import buttonizer from "buttonizer";

const button = document.querySelector("button");

// minimal config (uses defaults)
buttonizer(button, true, true, false, true);

React Usage

Buttonizer also provides a React hook.

React is optional and only required if you use this entry point.

import { useButtonizer } from "buttonizer/react";

function MyButton() {
  // minimal config (uses defaults)
  const ref = useButtonizer({styles: true, additionalStyles: true, altMode: false, clickEffect: true});
  return <button ref={ref}>Click me</button>;
}

Options

useButtonizer({
  styles?: Object,
  additionalStyles?: {
    hover?: Object,
    focus?: Object,
    default?: Object
  },
  altMode?: boolean,
  clickEffect?: boolean | {
    duration?: string,
    timing?: string,
    keyframes?: string
  }
})

Important Notes

• Options are applied on mount only

Function Signature (Vanilla)

buttonizer(
  target: Element | string | Array<any>,
  styles?: Object,
  additionalStyles?: {
    hover?: Object,
    focus?: Object,
    default?: Object
  },
  altMode?: boolean,
  clickEffect?: boolean | Object
)

Parameters

target

Element | string | array

Can be: - A DOM element - A selector string - An array of elements/selectors

styles

Object (optional)

Styles applied when the button is in the pressed state.

additionalStyles

Object (optional)

Convenience styles for other states:

{
  hover: {...},
  focus: {...},
  default: {...}
}

altMode

Boolean (default: false)

Controls how the pressed state behaves.

• false:
  • Matches actual click behavior
• true:
  • Matches raw pointer state

clickEffect

Boolean | Object (default: true)

Adds a visual animation on click.

Behavior

Pressed State

Handled via pointer and keyboard events to ensure correct behavior.

Dynamic Class Creation

Each state gets a unique class name backed by a style tag.

Example

buttonizer(
  [".btn-primary", "#submit"],
  { backgroundColor: "tomato" }
);

Notes

• Uses JS-style CSS keys
• Uses crypto.randomUUID() for uniqueness

Working Example

https://stackblitz.com/edit/vitejs-vite-wdieci8p?file=main.js