Você gostaria de criar um botão gradiente multicolorido em Elementor ?
Por padrão, Elementor possui um recurso para criar uma cor gradiente para o seu botão, mas é limitado apenas a duas cores. Este artigo mostrará como criar um botão gradiente multicolorido em Elementor sem a ajuda de um add-on, apenas usando CSS customizado do Elementor.
Adicionar um gradiente multicolorido ao seu botão pode torná-lo atraente e ter uma sensação natural. Você pode estar se perguntando: “É possível criar um botão de gradiente multicolorido no seu site? ”. Bem, tudo é possível com o Elementor e você pode criar facilmente um botão de gradiente multicolorido.
Como criar um botão de gradiente multicolorido no Elementor
Antes de iniciar o tutorial, queremos informar que este tutorial funcionará com CSS personalizado. O recurso CSS personalizado só está disponível em Elementor Pro; então certifique-se de atualizar para a versão pro.
Agora vá para o seu editor Elementor. Vamos começar do zero, então crie uma seção com apenas uma coluna. Em seguida, selecione o widget de botão no painel de widgets, arraste e solte-o na área de edição do Elementor. Depois de adicionar o widget de botão, você pode editar e estilizar o widget de acordo com suas preferências.
Nas configurações do widget, navegue até a guia avançado -> CSS personalizado. Copie o snippet de CSS abaixo e cole-o no campo CSS personalizado.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Se você está satisfeito com o gradiente multicolor que foi aplicado (como na imagem acima), você pode mantê-lo assim e salvar seu projeto, se desejar. Mas, se você quiser personalizá-lo, poderá fazê-lo modificando o snippet CSS mais especificamente no bloco de declaração CSS.
O bloco de declaração CSS começa com uma chave de abertura ( {'' ) e termina com a chave direita de fechamento (''} ).
Para obter o bloco de declaração, você pode criar um gradiente usando o ferramentas CSS gradiente on-line. Clique aqui para ver alguns ferramentas de gradiente CSS. Quando terminar de criar o gradiente, copie o CSS e substitua o bloco de declaração existente por um novo colando o CSS.
Observação: Você também pode criar título gradiente no Elementor .
Obtenha o Elementor Pro agora !!!
Conclusão
Este artigo mostra com que facilidade você pode criar um botão de gradiente multicolorido no Elementor. Se você estiver usando o Elementor como um construtor de páginas para o seu site WordPress e você deseja criar um botão impressionante com um gradiente multicolorido, este artigo pode ser sua solução.
Botões de uma ou duas cores podem parecer simples e chatos. Mas cuidado ao criar gradientes multicoloridos em seus botões. Por favor, preste atenção ao tom e à mistura de cores que você usa para que seus botões não pareçam estranhos e chatos.
Aqui ! É isso neste artigo que mostra como criar botão de gradiente multicolorido no Elementor. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
