Button CTA

Botão animado com seta deslizante. Suporta variante invertida para fundos escuros.

Preview

Instalação

1. Rode o comando

O CLI instala as dependências e cria o arquivo no seu projeto automaticamente.

npx hubkitlib add button-cta

Uso

import { ButtonCta } from "@/components/button-cta";

export default function Page() {
  return (
    <ButtonCta href="/contato">Saiba mais</ButtonCta>
  );
}

Props

Prop	Tipo	Padrão	Descrição
children	ReactNode	"Contato"	Texto exibido dentro do botão.
href	string	"/"	URL de destino ao clicar no botão.
inverted	boolean	false	Inverte as cores: fundo claro com texto escuro. Ideal para seções com fundo branco.
className	string	—	Classes Tailwind extras para sobrescrever ou estender os estilos padrão.

Personalização

Após copiar o componente, estes são os pontos exatos para personalizar cada aspecto visual:

Cores do botão

As cores escura e clara estão na linha abaixo. Substitua #111111 e #FAFAFA pelas cores do seu projeto.

inverted ? "bg-[#FAFAFA] text-[#111111]" : "bg-[#111111] text-[#FAFAFA]"

Cor do círculo da seta

O círculo que envolve a seta também tem sua cor definida aqui. Ajuste para combinar com o seu tema.

inverted ? "bg-[#111111] text-[#FAFAFA]" : "bg-white text-[#111111]"

Velocidade da animação

O valor duration-500 controla a velocidade do efeito hover. Use duration-300 para mais rápido ou duration-700 para mais lento.

"group transition-all duration-500 hover:ps-14 hover:pe-6 w-fit overflow-hidden"

Tamanho do botão

Ajuste h-12 para mudar a altura, ps-6 e pe-14 para o padding horizontal, e text-sm para o tamanho da fonte.

"relative inline-flex items-center text-sm font-semibold rounded-full h-12 p-1 ps-6 pe-14"

Ícone da seta

O ícone vem da lib remixicon-react. Troque ArrowRightUpLineIcon por qualquer outro ícone da mesma lib ou de outra de sua preferência.

<ArrowRightUpLineIcon size={16} />

Documentação

Documentação hubkit

Pré-requisitos, configuração do Tailwind, dependências comuns e tudo que você precisa para usar os componentes do hubkit no seu projeto.