Before Effect Button

Inputs

Text button with a soft highlighted pill that fades in behind it on hover.

Variants

Hover only (default) — pill aparece só no hover

hoverOnly={false} — pill sempre visível, escurece no hover

Instalação via CLI

$ npx kikitocn add before-effect-button

Interno:

@/lib/utils

Exemplo de uso

Before Effect ButtonExample.tsx

import { BeforeEffectButton } from "@/components/ui/cn/before-effect-button/BeforeEffectButton";

export function BeforeEffectButtonExample() {
  return (
    <BeforeEffectButton>
      Before Effect Button
    </BeforeEffectButton>
  );
}

Props

Prop	Tipo	Padrão	Descrição
`children*`	`React.ReactNode`	—	Conteúdo do botão
`hoverOnly`	`boolean`	`true`	Pseudo-elemento ::before só aparece no hover (true) ou fica sempre visível (false)
`className`	`string`	—	Classes CSS extras

Voltar para Inputs

Carregando…