Um botão padrão recebe cliques; um botão com um pouco de movimento recebe mais deles. O Botões Criativos widget em Complementos Mestres para Elementor envia uma biblioteca de predefinições de efeitos de hover, desde varreduras sutis de fundo até animações de troca de texto, para que uma chamada à ação possa se mover sem que você escreva uma linha de CSS.
Você escolhe uma predefinição, digita o texto, adiciona um ícone se quiser e estiliza os estados normal e de pairar Este guia cobre todo o widget, arraste para o botão finalizado.
O que o widget Creative Buttons faz #
O widget renderiza um botão call-to-action com uma animação hover pré-construída As animações vêm como predefinições nomeadas, mais de vinte delas, cada uma com seu próprio movimento: fundos que deslizam, bordas que se desenham, texto que vira para uma mensagem alternativa Todo o resto funciona como um botão Elementor normal: texto, link, ícone, alinhamento e controle de cores completo por estado.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
- O widget Botões Criativos habilitado no painel de opções Master Addons, em Widgets Básicos.
Como adicionar o widget Botões Criativos #
No editor Elementor, pesquise no Elementos painel para Botões Criativos e arraste o widget para a página Um botão escuro lendo “Adicione seu conteúdo CTA” aparece, já conectado com o efeito padrão.
Escolha uma predefinição de efeito de botão #
Aberto Predefinição e controles de botão na guia Conteúdo. O Efeitos Botão dropdown é o coração do widget: Default, Winona, Ujarak, Wayra, Tamaya, Rayen, Pipaluk, Moema, Isi, Aylen, Saqui, Wapasha, Nina, Nanuk, Nuka, Antiman, Itzel, Naira, Quidel, Sacnite, Shikoba, e mais.
Cada nome é uma animação diferente do hover Passe o botão na tela após cada escolha e o editor reproduz o efeito ao vivo, então as predefinições de audição levam segundos Os nomes não sugerem o que fazem, então tentar quatro ou cinco é a maneira mais rápida de encontrar o certo. Alinhamento Botão e Alinhamento de texto do botão sente-se logo abaixo, cada um com uma alternância responsiva para configurações por dispositivo.
Defina o texto, o link e o texto alternativo #
O Botão Controles grupo cobre o conteúdo. Texto Botão é o rótulo e URL do link aponta o botão para algum lugar, com o ícone de engrenagem para as opções new-tab e nofollow.
Algumas predefinições, como Winona e Rayen, trocam o rótulo por uma segunda mensagem no hover Escolha uma dessas e uma Texto Alternativo do Botão campo aparece; a demonstração define para “Clique AGORA!” então o botão diz “Adicione seu conteúdo CTA” em repouso e inverta o pairar.
Adicionar um ícone #
O Ícone o Control abre a biblioteca de ícones do Elementor, com o Font Awesome e todos os conjuntos de ícones que você instalou.
Depois de escolher um, Posição do ícone coloca-o antes ou depois do rótulo e Espaçamento Ícone define a lacuna; a demonstração aumenta para 12 pixels para que o ícone e o texto respirem.
Estilize o botão #
Mudar para o Estilo aba e abrir Estilos Botão. O grupo superior lida com a forma: Largura, Tipografia, Botão Preenchimento, Tipo de fronteira, Raio Fronteira (8 na demonstração, para cantos suavemente arredondados), Sombra Caixa, e Tamanho do ícone.
Abaixo disso, Normal e Pairar cada aba carrega três cores: Cor do texto, Cor de fundo, e Cor do ícone. A demonstração fornece o texto branco do estado normal em azul:
Em seguida, inverte o estado de pairar para texto escuro em verde, de modo que o efeito anima entre dois looks claramente diferentes:
A Padrões a seção na parte inferior é um Pro extra para fundos decorativos de botões.
O resultado na página #
Na página ao vivo, o botão fica em suas cores normais até que o cursor chegue Em seguida, a predefinição é reproduzida: o plano de fundo varre para a cor do hover, o ícone e o deslocamento de texto e o texto alternativo aparece se a predefinição usar um.
Casos de uso comum #
- CTAs da seção de heróis onde a animação chama a atenção para a ação principal.
- Botões de página de preços com uma troca de texto como “Get Started” para “It's Free!” no hover.
- Botões de download e inscrição emparelhado com um ícone para reconhecimento instantâneo.
- Secções da página de destino que precisam de um botão para se destacarem dos padrões do tema.
Dicas para botões criativos melhores #
- Predefinições de audição na tela. Passe o botão após cada escolha de efeitos; a animação é reproduzida no editor, sem necessidade de visualização.
- Faça o contraste do estado de pairar. A animação lê melhor quando as cores normais e de hover diferem claramente, como a demonstração azul para verde.
- Mantenha o texto alternativo curto. As predefinições de troca de texto parecem limpas quando ambas as mensagens têm aproximadamente o mesmo comprimento.
- Um botão criativo por seção. O movimento ganha atenção; três botões móveis consecutivos competem entre si.
- Verifique o comportamento do toque no celular. As telas sensíveis ao toque não têm hover, portanto, certifique-se de que o estado normal seja lido como clicável por conta própria.
Vídeo Tutorial #
Você também pode assistir ao vídeo abaixo se quiser ver o botão criativo em ação, desde escolher uma predefinição de efeito até a animação de hover finalizada na página ao vivo.
Perguntas frequentes #
O que é o widget Creative Buttons em Master Addons?
É um widget Elementor para botões de call-to-action com animações de hover pré-construídas Você escolhe entre mais de vinte predefinições de efeitos nomeados, define o texto, o link e o ícone e estiliza os estados normal e de hover separadamente do painel Elementor.
Quantos efeitos de botão estão incluídos?
O dropdown do Button Effects lista mais de vinte predefinições, incluindo Winona, Ujarak, Wayra, Tamaya, Rayen, Moema, Naira e Shikoba Cada uma aplica uma animação hover diferente, e a tela do editor reproduz o efeito ao vivo quando você passa o botão.
Qual é o campo Texto do Botão Alternativo?
Algumas predefinições trocam o rótulo do botão por uma segunda mensagem no hover Quando você escolhe um desses efeitos, o campo Texto do botão alternativo aparece para que você possa definir a mensagem hover, como mudar “Get Started” para “It's Free!”.
Posso adicionar um ícone ao botão criativo?
Sim. O controle Ícone abre a biblioteca de ícones Elementor Depois de escolher um ícone, a Posição do Ícone o coloca antes ou depois do texto, o Espaçamento entre Ícones define a lacuna e o Tamanho do Ícone e a Cor do Ícone vivem na guia Estilo.
Posso estilizar o estado de pairar separadamente?
Sim. Estilos de Botão tem guias Normal e Hover, cada uma com sua própria Cor de Texto, Cor de Fundo e Cor de Ícone A predefinição anima entre os dois estados, então cores contrastantes tornam o efeito mais visível.
Embrulhando #
O widget Botões Criativos transforma um CTA simples em um animado sem código personalizado: escolha uma predefinição do menu suspenso Efeitos, defina o texto e o ícone e dê as cores dos estados normal e de pairar que vale a pena animar entre Ele combina bem com o widget Links Criativos para links de texto animado Navegue pelo conjunto completo de Widgets e extensões Master Addons, e veja o página preços para extras Pro como padrões de botões.
