Botões de estilo com novas opções de plano de fundo da Divi (6 designs incluídos)

Se você não aproveitou as vantagens da nova interface de opções de plano de fundo do Divi, você está perdendo. As possibilidades de design do plano de fundo são surpreendentes. Mas não seria incrível ter as mesmas opções de design poderosas para nossos botões? Se a resposta for sim, então acho que você vai adorar esse post.

Hoje vou mostrar como trazer os mesmos poderosos recursos de design de plano de fundo para botões de estilo. Este truque de design coloca em camadas o plano de fundo da Linha e da Coluna atrás do módulo de botão para fornecer 3 camadas de recursos de design. Com esse tipo de poder, as coisas podem ficar perigosas. Melhor ficar calmo e ir devagar no início

Vamos lá.

Espiada

Aqui estão os exemplos de designs de botão abordados nesta postagem.

Botões de estilo com novas opções de plano de fundo da Divi (6 designs incluídos)

Inscreva-se no nosso canal no Youtube

A configuração

Usando o Visual Building, adicione uma seção regular com uma linha de uma coluna.

Em seguida, adicione um Módulo de botão à linha.

Em seguida, atualize as configurações do módulo de botão da seguinte forma:

Opções de conteúdo

Texto do botão: [inserir texto]
URL do botão: [inserir URL]

Opções de Design

Alinhamento do botão: Centro
Cor do Texto: Claro
Use estilos personalizados para botão: SIM
Tamanho do texto do botão: 48 px

Opções avançadas

Precisamos da largura de 100% será necessária para preencher a largura da coluna. Para fazer isso, insira o seguinte CSS personalizado na caixa Elemento principal:

Width: 100%;

Salvar configurações

Você não pode ver nada na página agora porque a borda do botão e o texto estão em branco. Em vez de definir o estilo da cor de fundo do botão usando as configurações do módulo de botão, vamos personalizar a cor de fundo da linha / coluna atrás do botão usando as opções de fundo mais avançadas. Estaremos revisitando as configurações do módulo de botão assim que começarmos a fazer designs mais específicos nos botões. Mas, por enquanto, vamos terminar de configurar a linha.

Vá para as configurações de linha em que seu novo botão está localizado e atualize o seguinte:

Opções de conteúdo

Selecione a guia Gradiente de fundo da coluna 1 e clique no botão circular cinza com um símbolo de adição branco.

Agora você deve ver as cores de gradiente padrão exibidas atrás do botão branco.

A coluna está se encaixando bem atrás do nosso botão agora, mas precisamos diminuir a largura do botão. Para fazer isso, vamos usar as configurações de dimensionamento de linha. Ao definir uma largura personalizada para nossa linha, também definimos a largura de nosso botão.

Opções de Design

Nas opções de design, vamos ajustar o tamanho da linha para caber em nosso novo botão, ajustando o seguinte:

Usar largura personalizada: SIM
Largura personalizada: 500 px (define a largura máxima do botão como 500 px)
Preenchimento personalizado: 0px superior, 0px direito, 0px inferior, 0px esquerdo

Opções avançadas

Precisamos corresponder o raio da borda da linha e coluna ao que definimos para o nosso botão para que todas correspondam. Para fazer isso, insira o seguinte CSS personalizado na caixa Elemento principal:

border-radius: 10px;

Insira o mesmo CSS na caixa Elemento principal da coluna:

border-radius: 10px;

Salvar configurações

Agora que as configurações de linha foram atualizadas para ter uma largura e preenchimento personalizados, duas coisas foram realizadas. Primeiro, definimos com sucesso uma largura personalizada para o nosso botão. Em segundo lugar, agora temos outra camada de opções de plano de fundo que podemos usar para estilizar nosso botão.

Isso é um total de 3 camadas de fundo (botão, coluna, linha) que poderíamos usar para estilizar mais tarde.

Aqui está uma ilustração de como o botão é construído atualmente.

Muito legal, certo?

Isso é tudo para a configuração básica. Agora é a hora da parte divertida de criar designs incríveis para seus botões.

Criação de designs de botão incríveis

Botão de fundo de vídeo nº 1

Para criar este botão, você usará todas as 3 camadas, o plano de fundo da linha para o vídeo, o plano de fundo da coluna para o gradiente e o plano de fundo do botão para a leve sobreposição azul.

Para as configurações de linha, atualize as seguintes opções de conteúdo :

Vídeo de fundo: [enviar vídeo]
Cores de gradiente de fundo da coluna 1: rgba (12.113.195,0,41), rgba (131,0,233,0,18)

Salvar configurações

Para as configurações do módulo de botão , atualize o seguinte:

Opções de conteúdo

Texto do botão: “Confira”

Opções de Design

Cor de fundo do botão: rgba (12.113.195.0.25)
Cor da borda do botão: # 0c71c3

Salvar configurações

Agora, o único problema que resta é o raio da borda do plano de fundo do vídeo. Temos que adicionar algum CSS personalizado para dar ao vídeo um raio de borda que corresponda ao botão. Este código extra é necessário apenas para o botão de fundo do vídeo.

Para adicionar o CSS personalizado, vá para as configurações de página do Visual Builder e clique na guia Avançado. Em seguida, atualize a caixa de entrada CSS personalizado com o seguinte CSS:

.et_pb_section_video_bg {

border-radius: 10px;

}

Salvar configurações

Dica : Outra opção de design legal é ter o vídeo exibido pairando no ar. Basta dar ao módulo de botão uma cor de fundo sólida e alterá-lo para transparente ao passar o mouse.

É isso! Agora você tem um botão com um fundo de vídeo.

Botão quadriculado nº 2

O botão quadriculado requer o uso de duas camadas (linha e coluna) de gradientes de cor de fundo.

Para criar este botão, você vai usar 2 camadas, o fundo da linha para o primeiro nível de gradientes e o fundo da coluna para a última camada de cor gradiente.

Para as configurações de linha, atualize as seguintes opções de conteúdo :

Cores gradientes de fundo: # 8300e9, # 0c71c3
Direção do gradiente: 270 graus
Posição inicial: 50%
Posição final: 0%
Cores de gradiente de fundo da coluna 1: rgba (224,11,0,0.39), rgba (255,255,255,0)
Direção do gradiente: 180 graus
Posição inicial: 50%
Posição final: 0%

Salvar configurações

Agora vá para Configurações do Módulo de Botão e atualize o seguinte

Opções de conteúdo

Texto do botão: “Inscrever-se”

Opções de Design

Largura da borda do botão: 0 px
Espaçamento entre letras dos botões: 10 px
Fonte do botão: padrão, negrito (B), itálico (I)
Espaçamento entre letras do botão ao passar o mouse: 10 px

É isso. Aqui está o resultado final.

Agora você sabe como adicionar um efeito xadrez aos seus botões.

Botão de gradiente radial nº 3

Para criar este botão, você usará 2 camadas (linha e coluna) de gradientes de cor de fundo.

Para as configurações de linha, atualize as seguintes opções de conteúdo :

Cores gradientes de fundo: # 8300e9, # 0c71c3
Tipo de gradiente: radial
Direção Radial: Centro
Posição inicial: 50%
Posição final: 100%
Cores gradientes de fundo da coluna 1: rgba (224,11,0,0.39), rgba (255,255,255,0)
Tipo de gradiente: radial
Direção Radial: Centro
Posição inicial: 50%
Posição final: 100%

Salvar configurações

Agora vá para Configurações do Módulo de Botão e atualize o seguinte:

Opções de conteúdo

Texto do botão: “contacte-me”

Opções de Design

Largura da borda do botão: 0 px
Fonte do botão: Crafty Girls

Ícone do botão: [escolher o ícone de coração]
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO

Opções avançadas

Para um toque final, vamos adicionar uma sombra de slide ao botão. Além do código anterior, insira o seguinte CSS personalizado na caixa Elemento principal :

box-shadow: 0px 5px 10px 3px #ccc;

É isso! Aqui está o seu resultado final:

# 4 Bullseye Button

Para criar este botão, você usará 2 camadas (linha e coluna) de gradientes de cor de fundo. Além disso, vamos adicionar alguns css personalizados no módulo de botão para criar o efeito pop-up da borda inferior.

Para as configurações de linha, atualize as seguintes opções de conteúdo :

Cores gradientes de fundo: # 023500, # 008c02
Tipo de gradiente: radial
Direção Radial: Centro
Posição inicial: 19%
Posição final: 0%
Cores de gradiente de fundo da coluna 1: rgba (0,206,72,0,43), rgba (255,255,255,0)
Tipo de gradiente: radial
Direção Radial: Centro
Posição inicial: 32%
Posição final: 0%

Agora vá para Configurações do Módulo de Botão e atualize o seguinte:

Opções de conteúdo

Texto do botão: “Comprar”

Opções de Design

Tamanho do texto do botão: 65 px
Largura da borda do botão: 0 px
Fonte do botão: Roboto, negrito (B), maiúscula (TT)

Opções avançadas

Agora, para o toque final. Adicione o seguinte CSS personalizado ao código existente na caixa de entrada Elemento principal :

box-shadow: 0px 5px 0px 0px #01771f;

Botão de imagem nº 5

Para criar este botão, você usará todas as 3 camadas, a linha para a imagem de fundo, a coluna para o fundo gradiente e o fundo do botão para a sobreposição de cor azul semitransparente.

Para as configurações de linha, atualize as seguintes opções de conteúdo :

Na guia Imagem de Fundo

Imagem de fundo: [upload de imagem]
Tamanho da imagem de fundo: capa
Posição da imagem de fundo: centro
Repetição da imagem de fundo: sem repetição
Mistura de imagem de fundo: multiplique

Na guia Background Gradient

Cores gradientes de fundo: rgba (12.113.195,0.33), # edf000
Tipo de gradiente: Linear
Direção do gradiente: 63deg
Posição inicial: 50%
Posição final: 100%

Agora role para baixo até as opções de fundo da coluna 1 e selecione a guia gradiente.

Cores de gradiente de fundo da coluna 1: rgba (236,239,31,0.66), rgba (0,0,0,0.49)
Tipo de gradiente da coluna: Linear
Direção do gradiente da coluna: 139 graus
Posição inicial da coluna: 12%
Posição final da coluna: 0%

Salvar configurações

Isso cuida do nosso segundo nível de designs de plano de fundo. Mais uma esquerda.

Vá para as Configurações do Módulo de Botão e atualize o seguinte:

Opções de conteúdo

Texto do botão: “Obter ingressos”

Opções de Design

Cor de fundo do botão: rgba (12.113.195,0.16)
Cor da borda do botão: # efef4f
Fonte do botão: Lato
Ícone de botão: [selecione o ícone de ingressos]
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO

Cor do texto do botão flutuante: # 023b7c
Botão Hover Background cor: # 023b7c

É isso!. Verifique seu botão de imagem.

# 6 Botão Retrato

Para construir este último botão, vamos usar apenas uma camada de design de plano de fundo. Vamos usar uma mistura de imagem da imagem de fundo e da cor de fundo para criar uma aparência única.

Para as configurações de linha , role para baixo até as opções de plano de fundo da coluna 1 e atualize o seguinte:

Imagem de fundo da coluna: [carregar imagem retrato]
Tamanho da imagem de fundo da coluna: Ajustar (isso garantirá que o retrato sempre caiba dentro do botão)
Posição da imagem de fundo da coluna: Centro esquerdo (isso alinha seu retrato à esquerda do botão)
Repetição da imagem de fundo da coluna: sem repetição
Mistura da imagem de fundo da coluna: Luminosidade (isso cria uma bela mistura da cor laranja com o retrato)

Certifique-se de excluir as cores gradientes atuais, caso as tenha definido. Caso contrário, você deseja mesclar o fundo laranja. Basta clicar na guia gradiente, passar o mouse sobre a caixa do seletor de cores e clicar no ícone da lixeira que aparece no canto superior direito.

Agora você pode ver a mistura de laranja em seu botão.

Salvar configurações

Agora vá para Configurações do Módulo de Botão e atualize o seguinte:

Opções de conteúdo

Texto do botão: “Vamos Conversar”

Opções de Design

Alinhamento do Botão: Direito
Cor da borda do botão: # ff7b23
Espaçamento entre letras dos botões: 3px
Fonte do botão: Macaco feliz
Ícone de botão [adicionar ícone de chat]
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Espaçamento entre letras do botão ao passar o mouse: 3px

Tudo feito! Eu gosto deste design para um botão de contato do blog. Eu acho que adiciona um toque pessoal legal.

Desenho de botões em diferentes estruturas de coluna

Até agora, temos usado as linhas de uma única coluna para servir de plano de fundo para nossos botões. Isso nos permite três camadas de design de plano de fundo. No entanto, se desejar incluir um botão em uma estrutura de coluna diferente, você pode. Você apenas perderá a linha como uma camada de fundo.

Por exemplo, digamos que você deseja adicionar uma linha de 1/2 1/2 coluna com um botão à esquerda e algum texto à direita. Aqui está o que você faria.

Comece com uma nova seção regular e selecione a estrutura de linha de coluna 1/2 1/2 . Em seguida, adicione um módulo de botão à coluna esquerda.

Nas configurações do Módulo de botão , certifique-se de inserir o seguinte CSS na caixa de entrada Elemento principal na guia Avançado:

Width: 100%;

Você pode personalizar o resto do módulo de botão posteriormente.

Em seguida, vá para Configurações de linha e role para baixo até as opções de plano de fundo da coluna 1 e atualize as configurações de plano de fundo como desejar.

Em seguida, vá para a guia Design e atualize o seguinte:

Preenchimento personalizado da coluna 1: 0px superior, 0px direito, 0px inferior, 0px esquerdo

Salvar configurações

Agora você tem um botão na coluna esquerda que é capaz de usar as opções de plano de fundo da coluna 1 para o design. Depois de voltar e atualizar o estilo do botão de acordo com sua preferência, adicione seu texto na coluna certa e pronto!

Responsivo?

sim. Como os botões são construídos dentro da estrutura de colunas do Divi, eles respondem bem em todos os dispositivos. Você pode precisar revisitar as configurações do módulo de botão para ajustar como certos elementos de botão se ajustam a diferentes dispositivos.

Suporte para vários navegadores

Atualmente, a propriedade CSS do modo de mesclagem de fundo não é compatível com o Internet Explorer ou Edge e o Safari tem opções de mesclagem limitadas. No entanto, o fallback não é considerável em minha experiência para a maioria dos casos.

Esta é a aparência dos botões no IE:

Se você estiver comprometido com o IE, sugiro testá-los para encontrar um meio termo que tenha uma boa aparência no IE e em outros navegadores.

Pensamentos finais

Tenho que admitir, este tutorial é bastante inovador para mim, pessoalmente. No passado, eu precisava adicionar várias classes e CSS adicionais ao meu tema filho se quisesse estilizar os botões de maneira criativa. Mas agora que posso usar as opções de plano de fundo do Divi, minha vida se tornou muito mais fácil. Espero que você possa usar este truque de design para levar seus botões para o próximo nível.

Ansioso por ouvir de você nos comentários.

Saúde