Customizar botones  

Hola Walter,

Como estas añadiendo los botones en tu sitio web? estas usando algún constructor? si es posible envíanos una captura como los estas añadiendo de esta forma podemos verificar con mayor detalle

Un Saludo

Hola Karen, lo hago con los botones que trae integrados Gutenberg nativo.

Te copio el codigo que se genera

<!-- wp:buttons {"contentJustification":"center"} -->
<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"backgroundColor":"vivid-green-cyan","textColor":"white","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-vivid-green-cyan-background-color has-text-color has-background" href="https://wa.me/5491159271763/?text=WhatsApp sólo por temas laborales y sucesiones en CABA (Capital Federal). Casos de GBA, Córdoba y Rosario podés enviar la consultas por el formulario https://estudiowls.com.ar/contacto /" target="_blank" rel="noreferrer noopener"><img class="wp-image-8850" style="width: 50px;" src="https://estudiowls.com.ar/wp-content/uploads/2021/01/Icono-WhatsApp-min.png" alt=""> Consultas online (sólo CABA)</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Hola Walter,

En este caso al tenerlo añadido en dos bloques estos se ajustaran de forma que se posicionen uno encima de otro, para que los puedas añadir los dos en linea deben estar en el mismo bloque

Un Saludo

Me expliqué mal.

Lo que necesito es reducir el tamaño de la fuente (solo para vista movil) ya que en la vista movil sobrepasa el tamaño del bloque y ello hace que se muestre el texto en dos lineas).

Hola Walter,

Entiendo, en este caso prueba el siguiente código CSS, solo debes modificar el tamaño de la fuente por la que desees

@media screen and (max-width: 500px) {
.wp-block-buttons.is-content-justification-center {
font-size: 12px;
}
}

Un Saludo

Gracias!

Podria hacer algo para reducir el espacio entre el contenido del boton y el borde? (Creo que le dicen padding), me gustaria ajustarlo un poco mas para que haya menos espacio vacío.

Hola Walter,

En este caso puedes probar el siguiente código, ten en cuenta que lo que añade mas espacio es el tamaño de las imágenes dentro de los botones por lo que debes probar reducirlas

@media screen and (max-width: 500px) {
.wp-block-buttons.is-content-justification-center {
font-size: 12px;
}
.wp-block-button.is-style-outline img {
width: 35px !important;
}
.wp-block-button.is-style-outline {
padding: 5px;
}
}

Verifica si con ello logras modificar lo que deseas

Un Saludo

Gracias, solucionado!

Se podrá dar un efecto hover sobre el boton de WhatsApp? para que cambie de color al pasar sobre el mismo (color inverso podría ser)

Hola Walter,

En este caso prueba con el siguiente código CSS

:root .has-vivid-green-cyan-background-color:hover {
background-color: #df6060;
}

Ten en cuenta modificar el color por el que deseas, de igual forma si necesitas realizar nuevos cambios te recomiendo abras un nuevo tema para ello de esta forma mantenemos un control sobre el hilo y podemos ayudarte ccon mayor detalle

Un Saludo 😊