Elementor Widget de botão animado com efeitos de Hover criativos
O botão criativo é um widget gratuito de complementos mestres para botões de call-to-action com uma animação hover integrada Escolha um efeito na lista de efeitos de botão, digite o texto e uma segunda mensagem opcional para passar o mouse, adicione um ícone e estilize as cores normal e do hover O plugin gratuito inclui 6 efeitos: Padrão, Winona, Ujarak, Wayra, Tamaya e Rayen. Master Addons Pro adiciona mais 15, de Pipaluk a Shikoba, para 21 no total.
Como adicionar um botão animado no elementor
Você precisa do Elementor e do plugin gratuito Master Addons do WordPress.org.
- Verifique se o botão criativo está ligado Complementos mestres, widgets.
- No editor Elementor, procure por Botão Criativo e arraste-o para a página.
- Escolha um efeito em Efeitos Botão e passe o mouse sobre o botão para visualizá-lo.
- Digite o Texto do Botão, o Texto do Botão Alternativo e o URL do Link.
- Adicione um ícone e escolha Antes ou Depois.
- Na guia Estilo, defina o preenchimento, o raio da borda e as diferentes cores Normal e Hover para que a animação seja fácil de ver.
Para um passo a passo mais longo com extensões como dicas de ferramentas e animações de revelação, leia Como criar botões animados do elementor. Cada configuração está no Configurações criativas do widget de botão.
21 efeitos de pairar: 6 grátis, 15 com Pro
Cada nome em Efeitos Botão é uma animação de hover CSS diferente, como um plano de fundo que desliza, uma borda que desenha em torno do botão ou texto que troca para uma segunda mensagem Padrão, Winona, Ujarak, Wayra, Tamaya e Rayen são gratuitos Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite e Shikoba precisam de Pro. Passe o botão na tela para visualizar cada um.
- Alinhamento de botões e alinhamento de texto de botões, definido por dispositivo.
- Cores de fundo extras antes e depois para efeitos que usam fundos em camadas.
- A velocidade de animação é fixada por cada efeito Não há configuração de duração de transição.
Texto do botão, texto alternativo, ícone e estilo
Definir o Texto Botão e a URL do link com as opções usuais de nova guia e nofollow. Cada efeito, exceto o padrão, mostra um Texto Alternativo do Botão campo para a mensagem de passagem (hover message) Adicionar um Ícone antes ou depois do texto com Espaçamento de Ícones. Em Estilos Botão, defina Largura, Tipografia, Preenchimento de Botão, Border, Border Radius, Box Shadow e Icon Size, depois escolha as cores do texto, fundo e ícone para Normal e Hover.
- “Comece” que muda para “É” grátis no hover.
- Um ícone de seta após o texto para mostrar a direção.
- Botões de comprimidos arredondados com uma borda que muda de cor ao passar o mouse.
Botão Elementor vs Botão Criativo Master Addons
O widget gratuito do botão Elementor já possui animações hover. É aqui que cada um se encaixa.
| Característica | Botão Elementor | Botão criativo Master Addons |
|---|---|---|
| Preço | Gratuito em Elementor | 6 efeitos livres, 21 com Pro |
| Animação hover | Elementor Hover Lista de animação, como Grow, Pulse, Bob e Wobble | Nomeado efeitos CSS com fundos deslizantes, bordas e cores em camadas |
| Troca de texto no hover | Não | Texto Alternativo do Botão |
| Fundo | Clássico ou gradiente para Normal e Hover | Cores sólidas, além de cores Antes e Depois em alguns efeitos |
| Velocidade transição | Configuração da duração da transição | Fixado por cada efeito |
| Ícone | Antes ou depois, com espaçamento | Antes ou depois, com espaçamento, tamanho e cor de hover |
Use o Botão Elementor para gradientes, uma velocidade de transição personalizada ou um simples crescimento ou pulso Use o Botão Criativo quando quiser uma varredura de fundo ou uma troca de texto sem CSS personalizado Para links de texto animados, consulte Links Criativos.
Perguntas frequentes para botão criativo
O widget do botão criativo é gratuito?
Sim. O widget e 6 efeitos (Default, Winona, Ujarak, Wayra, Tamaya e Rayen) são gratuitos Os outros 15 efeitos precisam Master Addons Pro.
Posso usá-lo como um botão de envio de formulário?
No. botão criativo é um link, não um botão de formulário Para estilizar um botão de envio, use o widget de formulário para o seu plugin, como o Formulário de contato 7 ou Formulários WP widget.
Os efeitos de hover funcionam em telefones?
As telas sensíveis ao toque não têm hover, então a maioria dos visitantes nos telefones vê o estado normal e vai direto para o link Certifique-se de que as cores normais e o texto funcionem por conta própria.
Posso alterar a velocidade da animação hover?
Não no painel Cada efeito tem o seu próprio tempo Você pode alterá-lo com CSS personalizado no botão, ou usar o widget Botão Elementor, que tem uma configuração de Duração de Transição.
Como isso é diferente da animação de hover do botão do elementor?
O Botão Elementor move o botão inteiro, por exemplo, crescer ou pulsar Os efeitos do botão criativo animam o interior do botão, como um plano de fundo deslizando ou o texto mudando para o Texto do botão alternativo.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
