eleganteWooCommerces."A?adir a la cesta"?Botones más atractivos? Pruebe con un dise?o de doble borde. Este estilo hace que los botones parezcan más estratificados y mejora el efecto visual general, dando a los clientes más ganas de hacer clic.

Aquí tienes un sencillo código CSS con el que puedes conseguir fácilmente este efecto de dise?o profesional. Y no te preocupes por los problemas de compatibilidad, este método se muestra perfectamente en todo tipo de teléfonos móviles y ordenadores.

I. ?Por qué utilizar botones de doble borde?

• visualmente prominentebotones más visibles que los normales, que pueden guiar al usuario a completar la compra rápidamente
• a?adir texturaBordes dobles : Los bordes dobles se utilizan habitualmente en las páginas de marcas premium para transmitir una sensación de calidad.
• Adaptación flexible: sólo necesitaCSSPuedes hacerlo sin un plugin, ?y funciona con todos los temas!

II. Principios de realización

Un doble borde suele crearse esquema tal vez box-shadow ya que HTML y CSS no soportan directamente las propiedades de los bordes. Métodos comunes:

• hacer uso de esquema Implantación de un borde exterior
• hacer uso de box-shadow Generar efecto de sombra en el borde exterior
• hacer uso de Pseudoelementos ::before / ::after Crear una segunda capa de bordes

III. Métodos de aplicación del código

en la siguiente "Botón "A?adir a la cesta Por ejemplo, el tema predeterminado de WooCommerce utiliza la propiedad .single_add_to_cart_button Clase.

Método 1: Utilizar el contorno para conseguir un doble borde

.woocommerce button.single_add_to_cart_button {
    borde: 2px sólido #0073aa; /* borde interior */
    contorno: 4px sólido #ffffff; /* borde exterior */
    outline-offset: -6px; /* acercar el borde exterior al botón */
    border-radius: 4px; /* borde exterior
}

Explicación:

• frontera Definir la anchura y el color del borde interior
• esquema Definir la anchura y el color del borde exterior
• contorno-desplazamiento Al ir en negativo, el borde exterior se estrecha con el interior, creando un efecto de doble capa

Método 2: Doble borde con sombra de caja

.woocommerce button.single_add_to_cart_button {
    box-shadow: 0 0 0 4px #ffffffff; /* borde interior */
    box-shadow: 0 0 0 4px #ffffff; /* borde exterior */
    box-shadow: 0 0 0 4px #ffffff; /* outer-border */ border-radius: 4px;
}

Explicación:

• box-shadow (utilizado como expresión nominal) 0 0 0 0 4px significa que no hay desplazamiento ni desenfoque, sólo se a?ade la sombra exterior de color sólido de 4px, es decir, la segunda capa del borde

Método 3: Utilizar pseudoelementos para crear un borde doble (más flexible)

.woocommerce button.single_add_to_cart_button {
    position: relative; border: 2px solid #0073aa; /* inner border */
    borde: 2px sólido #0073aa; /* borde interior */
    border-radius: 4px;
    z-index: 1;
}

.woocommerce button.single_add_to_cart_button::after {
    content: "";
    position: absolute; top: -4px; } .woocommerce button.
    top: -4px;
    izquierda: -4px;
    derecha: -4px;
    bottom: -4px; border: 2px solid #ffffff; /* borde exterior
    border: 2px solid #ffffff; /* Borde exterior */
    border-radius: 6px; /* borde exterior redondeado ligeramente más grande que el interior */
    z-index: -1;
}

Explicación:

• hacer uso de ::después Generar borde exterior
• pasar (una factura o inspección, etc.) arriba/izquierda/derecha/abajo Definir la posición del borde exterior
• El radio de las esquinas redondeadas de la capa exterior es ligeramente mayor que el de la capa interior para garantizar la armonía visual.

IV. Ubicación de la adición de código

• WordPress Backend → Apariencia → Personalización

• Haga clic en "CSS extra"

• Pegue el código anterior y haga clic en escriba a

V. Pruebas de respuesta y optimización

Una vez completada la configuración, pruébala:

• Escritorio, tableta, móvil efecto pantalla
• Compatibilidad con el tema botón hover, estado activo
• Si el borde está desalineado, ajuste los valores superior/izquierdo del contorno o del pseudoelemento.

VI. Preguntas más frecuentes

P1. ?Qué es mejor, el contorno o la sombra?

• esquema No ocupa mucho espacio, pero algunosnavegador (software)Puede mostrarse de forma diferente, hay que probarlo.
• box-shadow El renderizado es más estable y puedes a?adir desenfoque para conseguir un efecto de brillo.

P2. ?Se ha estropeado la disposición de los botones tras la modificación?

A?adir estilos de botones:

box-sizing: border-box;

Asegúrese de que los bordes y el relleno se calculan dentro de la anchura y altura totales del elemento.

alcanzar un veredicto

pasar (una factura o inspección, etc.)CSSestablecerWooCommerce"A?adir a la cesta"El efecto de doble borde en los botones no sólo aumenta el impacto visual, sino que también mejora la impresión que el usuario tiene de la marca. Al dise?ar la interfaz de usuario de un comercio electrónico, los detalles del estilo de los botones determinan la textura de la página y merece la pena invertir tiempo en optimizarlos.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres