Cambiar el color principal de los botones de Genesis Framework

En el theme Genesis Sample de Genesis Framework, los botones por defecto son de color negro y en Personalizar -> Colores sólo es posible cambiar el accent color que corresponde al “mouse hover”. Lamentablemente no hay ninguna opción para cambiar el color principal.

Esto es una carencia, ya que no siempre nos interesa tener los botones de color negro. Pero no te preocupes esto tiene solución con unas líneas de CSS.

Te vas a Apariencia / Personalizar / CSS adicional y añadimos las siguientes líneas:

.genesis-nav-menu > .menu-highlight > a,
button, input[type="button"],
input[type="reset"],
input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form button[type="submit"],
.button{
  background-color: #ff0000;
  color: #ffffff;
}

El resultado sería el siguiente:

Del código anterior fíjate en esta línea: background-color: #ff0000;

Esto determina el color de fondo del botón y corresponde al rojo.

Si necesitas otro color diferente lo puedes generar con el personalizador. Te vas a Apariencia / Personalizar / Colores, seleccionas el color que necesitas y copias el código.

Luego te vas otra vez en Apariencia / Personalizar / CSS adicional y sustituyes #ff0000 por el código de tu color nuevo.

.genesis-nav-menu > .menu-highlight > a,
button, input[type="button"],
input[type="reset"],
input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form button[type="submit"],
.button{
  background-color: #dd9933;
  color: #ffffff;
}

El resultado sería el siguiente:

Si lo necesitas puedes hacer lo mismo con el atributo “color” que corresponde al color del texto. De esta forma podrás diseñar botones con colores de fondo muy claros sin perder legibilidad en el texto.

Esperamos que en futuras versiones del Genesis Framework nos permitan poder cambiar el color principal de los botones directamente des del personalizador sin tener que acudir a código de CSS. Y es que en realidad no tiene mucho sentido que sólo se pueda cambiar el “mouse hover”, pero de momento es lo que hay…

Si tienes cualquier duda escribe un comentario y estaré encantado en echar un cable.

¡Un saludo!