Botão com Seta no Hover

Sobre

Botão em que um ponto laranja cresce e preenche o fundo ao passar o cursor, trocando o rótulo por uma seta. Transição de 300 ms só em CSS.

Detalhes

Categoria

Botões

Tipo

Componente

Framework

React

Tecnologias

React, CSS

Publicado em

27 de outubro de 2026

Base

Adaptado de Interactive Hover Button · Magic UI (licença MIT)

Dependências e requisitos

• react>=18

  Biblioteca de interface.

• Projeto React 18+. Não depende de Tailwind.

Arquivos incluídos

• components/integra/botao-seta-hover.tsxtsx

Como usar

import BotaoSetaHover from "@/components/integra/botao-seta-hover";

<BotaoSetaHover>Ver planos</BotaoSetaHover>