Cómo agregar sombra al texto de un botón usando código personalizado

Sombra de texto del botón "Acerca de" en GemPages

El texto dentro del elemento Botón se puede personalizar usando CSS. Al agregar un sombra de texto efecto, puedes:

• Hacer que el texto de los botones sea más visible sobre fondos recargados.
• Crea un diseño más moderno o de alta gama.
• Mejorar la jerarquía visual de los botones de llamada a la acción.
• Resaltar acciones importantes como: Comprar, Añadir al Carrito, o Empezar

Este método funciona con Elementos de botón en GemPages donde se desea realzar visualmente el texto sin cambiar la disposición de los botones.

Paso a paso: Cómo agregar sombra al texto de un botón

Sigue estos pasos cuidadosamente para aplicar un efecto de sombra al texto de tu botón.

Paso 1: Abre tu página en el editor de GemPages.

Desde Panel de Control de GemPages, abre la página que contiene el botón que deseas editar.

Localice la opción Elemento de botón que contiene el texto al que quieres añadir sombra.

Paso 2: Abra el panel de código personalizado.

Haga clic con el botón derecho directamente en el Elemento de botón que contiene el texto.

Entonces:

• Seleccione Código Personalizado

• El panel CSS aparecerán

Este panel le permite agregar estilos personalizados específicamente a ese botón.

Paso 3: Copie la clase del elemento.

Cuando se abra el panel CSS, verá un clase de elemento en la primera línea.

Se verá algo como esto:

.gp-button-abc123

Copia este nombre de clase; lo usarás en el siguiente paso.

Paso 4: Pegue el código de sombra de texto.

Agregue el siguiente código CSS personalizado al panel:

Entonces:

• Reemplace ElementClass con tu clase de botón real
• Haga clic en Guardar

Por ejemplo, si la clase de su elemento es: .gp-button-abc123

Tu código final debería verse así:

.gp-button-abc123 {

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

}

Una vez aplicado, el texto del botón se mostrará con un suave efecto de sombra.

Comprender los valores de la sombra del texto

El sombra de texto Esta propiedad incluye cuatro valores. Cada valor controla el aspecto de la sombra.

sombra de texto: 2px 2px 4px rgba(0, 0, 0, 0.3);

Esto es lo que significa cada valor:

2px → Desplazamiento horizontal

Controla la distancia a la que se mueve la sombra. izquierda o derecha.

Ejemplos:

2px → mueve la sombra hacia la derecha

-2px → mueve la sombra hacia la izquierda

2px → Desplazamiento vertical

Controla la distancia a la que se mueve la sombra. arriba o abajo.

Ejemplos:

2px → mueve la sombra hacia abajo

-2px → mueve la sombra hacia arriba

4px → Radio de desenfoque

Controla la nitidez o suavidad de la sombra.

Ejemplos:

0px → sombra nítida

4px → sombra suave

10px → sombra muy suave

Los números más altos crean sombras más suaves.

rgba(0, 0, 0, 0.3) → Color de sombra

Controla el color y la transparencia de la sombra.

Formato:

rgba(rojo, verde, azul, opacidad)

Ejemplo:

rgba (0, 0, 0, 0.3)

Medios:

• Rojo: 0
• Verde: 0
• Azul: 0
• Opacidad: 0.3 (30% visible)

Esto crea un sombra negra semitransparente.

Si desea crear colores de sombra personalizados, estas herramientas pueden ayudarle a generar valores RGBA fácilmente.

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

Estas herramientas le permiten:

• Elige cualquier color visualmente
• Ajustar la transparencia (opacidad)
• Copia el rgba(…) valor directamente
• Previsualiza los colores de las sombras antes de usarlos.