Cómo personalizar el botón de envío con CSS

3 de noviembre de 2023

Al margen de los botones de envío ya establecidos, podéis también personalizarlos utilizando CSS. Haced que los visitantes se sientan cómodos al enviar información e incrementad vuestras tasas de conversión.

Youtube Embed Poster: C0fzIsZA2r8

Para modificar la apariencia de vuestro botón de envío con CSS, debéis seguir los siguientes pasos:

  1. En el Creador de Formularios, seleccione el icono de la brocha azul en la esquina superior derecha, para así abrir el Diseñador de Formularios.
  2. En el Diseñador del Formulario, a la derecha, ve a Estilos en la parte superior.
  3. Deslice hacia abajo e Inserte el CSS personalizado.
Cómo personalizar el botón de envío con CSS Image-1
  1. Aplique vuestro CSS personalizado o utilice este código:
.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold15px arial,sans-serif;
text-shadow: none;
}

Para entender cada punto:

  • .form-submit-button — Es el selector para el botón de envío en su formulario.
  • background — Es el color detrás del texto.
  • color — Determina el color del texto.
  • border-style — Establece el estilo de vuestros botones de envío.
  • border-color — Es el color de los bordes de su botón de envío.
  • height — Establece la altura de su botón en píxeles.
  • width — Es el ancho de su botón en píxeles.
  • font — Son las propiedades de la tipografía de texto.

Aquí tenéis un ejemplo de cómo aparecerá:

Cómo personalizar el botón de envío con CSS Image-2

Para añadir efecto al enviar el botón, puede utilizar el siguiente CSS de ejemplo:

.form-submit-button {
background: #B9DFFF;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}
.form-submit-button:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}

Aquí tenéis el ejemplo de cómo aparece el botón cuando está sin movimiento, y cuando se pasa por encima de él:

Cómo personalizar el botón de envío con CSS Image-3
Contacte a atención al cliente:

Nuestro equipo de atención al cliente está disponible 24/7 y nuestro tiempo de respuesta promedio es entre una y dos horas.
Nuestro equipo puede ser contactado vía:

Foro de ayuda: https://www.jotform.com/answers/

Contacto a Soporte de Jotform: https://www.jotform.com/contact/

Enviar Comentario:

Jotform Avatar
Este sitio está protegido por reCAPTCHA y lo rigen la Política de privacidad de Google y los Términos de servicio.

Podo Comment Sea el primero en comentar.