Como adicionar sombra ao texto de um botão usando código personalizado

Sombra do texto do botão "Sobre" no GemPages

As texto dentro do elemento Botão Pode ser personalizado usando CSS. Adicionando um text-shadow Como efeito, você pode:

• Torne o texto do botão mais visível em fundos com muita informação.
• Crie um visual de design mais moderno ou sofisticado.
• Melhore a hierarquia visual dos botões de chamada à ação.
• Destaque ações importantes, como: Comprar agora, Adicionar ao Carrinho, ou Comece Agora

Este método funciona com Elementos de botão em GemPages onde você deseja aprimorar visualmente o texto sem alterar o layout do botão.

Passo a passo: Como adicionar sombra ao texto do botão

Siga estes passos cuidadosamente para aplicar um efeito de sombra ao texto do seu botão.

Passo 1: Abra sua página no editor GemPages

De você Painel GemPagesAbra a página que contém o botão que você deseja editar.

Localize o Elemento de botão que contém o texto ao qual você deseja adicionar sombra.

Passo 2: Abra o painel de código personalizado

Clique com o botão direito do mouse diretamente no Elemento de botão que contém o texto.

Então:

• Selecionar Código personalizado

• As Painel CSS aparecerá

Este painel permite adicionar estilos personalizados especificamente a esse botão.

Passo 3: Copie a classe do elemento

Quando o painel CSS abrir, você verá um classe de elemento logo na primeira linha.

Vai parecer algo assim:

.gp-button-abc123

Copie o nome desta classe — você a usará na próxima etapa.

Passo 4: Cole o código de sombra do texto

Adicione o seguinte CSS personalizado ao painel:

Então:

• Substituir Classe Elemento com sua classe de botão real
• Clique Economize

Por exemplo, se a classe do seu elemento for: .gp-button-abc123

Seu código final deve ser semelhante a:

.gp-button-abc123 {

 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;

}

Após a aplicação, o texto do seu botão será exibido com um efeito de sombra suave.

Entendendo os valores de sombra do texto

As text-shadow A propriedade inclui quatro valores. Cada valor controla a aparência da sombra.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Eis o que cada valor significa:

2px → Deslocamento horizontal

Controla a distância que a sombra percorre. esquerda ou direita.

Exemplos:

2px → move a sombra para a direita

-2px → move a sombra para a esquerda

2px → Deslocamento Vertical

Controla a distância que a sombra percorre. Para cima ou para baixo.

Exemplos:

2px → move a sombra para baixo

-2px → move a sombra para cima

4px → Raio de Desfoque

Controla a nitidez ou a suavidade da sombra.

Exemplos:

0px → sombra nítida

4px → sombra suave

10px → sombra muito suave

Números maiores criam sombras mais suaves.

rgba(0, 0, 0, 0.3) → Cor da Sombra

Controla a cor e a transparência da sombra.

Formato:

rgba(vermelho, verde, azul, opacidade)

Exemplo:

rgb(0, 0, 0, 0.3)

Significa:

• Vermelho: 0
• Verde: 0
• Azul: 0
• Opacidade: 0.3 (30% visível)

Isso cria um sombra preta semitransparente.

Se você deseja criar cores de sombra personalizadas, essas ferramentas podem ajudá-lo a gerar valores RGBA facilmente.

• https://rgbacolorpicker.com
• https://cssgradient.io
• https://www.w3schools.com/colors/colors_picker.asp
• https://htmlcolorcodes.com

Essas ferramentas permitem que você:

• Escolha visualmente qualquer cor.
• Ajustar transparência (opacidade)
• Copie o rgba(…) valor diretamente
• Visualize as cores das sombras antes de usá-las.