¡Atención!

Este artículo contiene código CSS y está destinado a desarrolladores. Ofrecemos este código como cortesía, pero no proporcionamos soporte para personalizaciones de código o desarrollo de terceros.

Para obtener ayuda adicional, consulta el tutorial de WPBeginner sobre cómo agregar CSS personalizado.

Descartar

Usar CSS para personalizar el botón de envío

Actualizado:
Ver Markdown

Introducción

¿Interesado en utilizar CSS para personalizar el botón de Enviar? CSS tiene un inmenso potencial para varios aspectos de tu sitio, y en este tutorial, te proporcionaremos ejemplos prácticos de cómo aprovechar las capacidades de CSS para transformar la apariencia de tu botón de Enviar.

Para este tutorial, no profundizaremos en la creación de formularios. Si necesitas ayuda para crear tu formulario, consulta esta guía informativa.

¿Nuevo en CSS? Nuestros amigos de WPBeginner ofrecen una excelente definición y ejemplos útiles. Descubre más sobre este tema en su página de glosario informativo.

Todos los ejemplos de este tutorial te proporcionarán el CSS para cambiar tu botón para todos los formularios, pero también para formularios individuales.

Para aprender cómo incorporar CSS en tu sitio web, consulta este tutorial. Si necesitas ayuda para encontrar el ID de tu formulario, consulta este tutorial.

Botón de ancho completo

En este caso, nuestro objetivo es que el ancho del botón de Enviar coincida con los campos de nuestro formulario. Para lograr esto, aplicaremos el siguiente CSS.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
    width: 100%;
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button.wpforms-submit {
    width: 100% !important;
}

Efecto de botón presionado para un solo formulario

Usando el siguiente CSS, haremos que el botón parezca presionado cuando se haga clic en él.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

este css hará que el botón de enviar parezca presionado al hacer clic

Enviar con 2 líneas de texto

Para este ejemplo, tendremos un botón con 2 líneas de texto.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

con este CSS puedes hacer que el botón de enviar aparezca en más de 2 líneas de texto

Animación al pasar el ratón

Para este ejemplo, incluiremos una doble flecha al pasar el ratón por encima del botón con el código content: '\00bb'; en el CSS. Para más información sobre cómo encontrar el código HTML correcto para tu símbolo, consulta la documentación de W3C Schools.

Podrías cambiar este icono por cualquier icono basado en fuentes, como los que se encuentran en este tutorial.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

este CSS te dará un efecto de animación cuando pases el ratón por encima del botón

Cambiar el color

Para este ejemplo, vamos a cambiar el color del botón. También vamos a cambiar el tamaño del texto, el color del texto y la familia de fuentes en este ejemplo.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

este botón de ejemplo ha cambiado el color, el color de fondo, el tamaño de fuente, la familia de fuentes y todas las mayúsculas del texto

Botón con sombra de caja

Este ejemplo te mostrará cómo aplicar una sombra de caja al botón usando el siguiente CSS.

Para un solo formulario

Este ejemplo se dirige solo al formulario con el ID 23.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Alternativamente, podrías aplicar la sombra de caja solo al pasar el ratón usando este CSS para el formulario.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Para todos los formularios

Este ejemplo se dirige a todos los WPForms.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Y de nuevo, al igual que en el ejemplo anterior, podrías aplicar la sombra de caja solo al pasar el ratón.

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

en este ejemplo de CSS mostramos box-shadow en el botón, ya sea todo el tiempo o solo al pasar el ratón por encima, dependiendo del fragmento que utilices

Y estos son solo algunos ejemplos de lo fácil que es personalizar el botón de envío usando CSS. ¿También te gustaría personalizar las etiquetas de tu formulario? Echa un vistazo a nuestro tutorial sobre Cómo añadir imágenes antes o después de las etiquetas de tu formulario.

Preguntas frecuentes

P: ¿Puedo usar este CSS también para los botones de salto de página?

R: Absolutamente, para usar cualquiera de estos ejemplos con botones estándar al usar el botón Page Breakbutton.wpforms-page-button.

Alternativamente, si quisieras dirigirte solo a un formulario individual, usarías la clase CSS form#wpforms-form-3221 button.wpforms-page-button en su lugar, y solo recuerda actualizar el ID del formulario para que coincida con tu propio ID de formulario.

Por ejemplo, el ejemplo de Animación al pasar el ratón como se muestra arriba para el botón de Enviar, haremos lo mismo para los botones de salto de página también.

Este CSS es para un formulario específico, el ID del formulario 3221. Si desea mantener esto en un solo formulario, deberá actualizar el 3221 para que coincida con su propio ID. Para obtener ayuda sobre cómo encontrar su ID de formulario, revise nuestra útil documentación.

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Este CSS sería para todos los formularios.

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

aquí tienes un ejemplo para cambiar los botones de Salto de Página

Etiquetado:
Aún atascado? ¿Cómo podemos ayudar?
Última actualización el 29 de ago de 2023