cambiar el color del botón

Un usuario preguntó 👇

Quiero cambiar el color de los botones, como el botón Realizar pedido. ¿Cómo puedo hacer eso?

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

Este tema fue modificado hace 2 años, 8 meses por. Lanzador de hilos

(@ miezz81)

Hace 2 años, 8 meses

Hice esto con CSS adicional en mi hijo, pero sería bueno hacerlo en un plugin como refuerzo.

Piense en esto como si quisiera la próxima versión.

(@rokasjan)

Hace 2 años, 8 meses

Hola Miezz88,

Para cambiar el color de los botones, debe agregar CSS personalizado en el módulo «CSS personalizado». Ve a la configuración de refuerzo> Correos electrónicos y micrófonos. > Habilite «CSS personalizado». Luego vaya a Configuración y en «CSS personalizado – Fin de frente (Clientes)» pegue esto:

button, html input[type="button"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #0000FF;
}

button:hover, html input[type="button"]:hover,input[type="submit"]:hover, .button:hover, button:focus, html input[type="button"]:focus, input[type="submit"]:focus, .button:focus {
    color: #ffffff;
    background-color: #00FF00;
}

El atributo «color» cambia el color del texto del botón (líneas 2 y 8) el atributo «color de fondo» cambia el color de fondo del botón (líneas 3 y 9)

Los primeros atributos de «color» y «color de fondo» le permiten personalizar el estilo del botón como se muestra al cargar el sitio, la segunda característica permite cómo se muestra el botón cuando el mouse pasa sobre él.

Los nombres de los colores deben escribirse en códigos de colores hexadecimales. Para personalizar otros botones, copie el código y reemplace el tipo de entrada «enviar» con otros tipos de botones.

[ Signature deleted ]

Esta respuesta fue modificada hace 2 años, 7 meses. Lanzador de hilos

(@ miezz81)

Hace 2 años, 8 meses

Este código parece no hacer nada. No quiero cambiar todos los botones posibles, solo estos tres:

Añadir al carrito Continuar con la comprobación de lugar de pedido

¿Cómo puedo hacer eso?

(@rokasjan)

Hace 2 años, 8 meses

Hola de nuevo,

Puede especificar qué clase desea cambiar de estilo. Hay un botón Agregar a la tarjeta en la clase «single_add_to_cart_button» (puede ver esto haciendo clic derecho sobre él y seleccionando la función de exploración), por lo que el código para cambiar los colores de ese botón sería

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Si desea cambiar de color dependiendo de si el usuario lo está revisando, el código sería

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

El código completo para los tres botones es:

.single_add_to_cart_button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.single_add_to_cart_button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.button#place_order.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.button#place_order.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

.checkout-button.button:hover{
	background-color: #FF0000;
	color: #FFFFFF;
}

.checkout-button.button{
	background-color: #00FF00;
	color: #FFFFFF;
}

Si algunos de los botones no cambian, CSS modifica los nombres de las clases de botones en consecuencia.

Lanzador de hilos

(@ miezz81)

Hace 2 años, 8 meses

Gracias por su respuesta. Después de algunos ajustes, el código funcionó:

.woocommerce .product .single_add_to_cart_button.button{
	background-color: #27cda5;
	color: #FFFFFF;
}

Caso cerrado, gracias de nuevo.

¿Solucionó tu problema??

SíNo

0 / 0