--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-boton' title: 'Elige estilos de botón que guían a las visitas | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:17:43+00:00' updated: '2026-10-24T19:36:26+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Tú decides cuánto destaca cada botón. Un botón sólido marca la única acción que más quieres, y un botón con contorno junto a él ofrece la alternativa sin competir. Esta página muestra cómo dar estilo a tal pareja y qué cambia cada ajuste. Para añadir un botón y fijar su enlace, consulta Añadir un botón. El vídeo sigue los pasos de abajo: convierte Apply now en el botón principal y añade un segundo botón con contorno. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:36:26+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Elige estilos de botón que guían a las visitas' description: |- Tú decides cuánto destaca cada botón. Un botón sólido marca la única acción que más quieres, y un botón con contorno junto a él ofrece la alternativa sin competir. Esta página muestra cómo dar estilo a tal pareja y qué cambia cada ajuste. Para añadir un botón y fijar su enlace, consulta Añadir un botón. El vídeo sigue los pasos de abajo: convierte Apply now en el botón principal y añade un segundo botón con contorno. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:17:43+0000' dateModified: '2026-10-24T19:36:26+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-boton' articleSection: 'Guías de diseño' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/diseno/estilos-boton' description: |- Tú decides cuánto destaca cada botón. Un botón sólido marca la única acción que más quieres, y un botón con contorno junto a él ofrece la alternativa sin competir. Esta página muestra cómo dar estilo a tal pareja y qué cambia cada ajuste. Para añadir un botón y fijar su enlace, consulta Añadir un botón. El vídeo sigue los pasos de abajo: convierte Apply now en el botón principal y añade un segundo botón con contorno. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) /[Guías de diseño](/es/hc/documentation/learn-dxpr-builder/design/overview) # Elige estilos de botón que guían a las visitas. Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño ## En esta guía Guías relacionadas - [Añadir un botón](/es/hc/documentacion/aprender-dxpr-builder/elementos/boton) - [Haz que los elementos reaccionen en hover](/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover) - [Usa los colores de tu marca](/es/hc/documentacion/aprender-dxpr-builder/diseno/colores-marca) Tú decides cuánto destaca cada botón. Un botón sólido marca la única acción que más quieres, y un botón con contorno junto a él ofrece la alternativa sin competir. Esta página muestra cómo dar estilo a tal pareja y qué cambia cada ajuste. Para añadir un botón y fijar su enlace, consulta [Añadir un botón](/es/hc/documentacion/aprender-dxpr-builder/elementos/boton). El vídeo sigue los pasos de abajo: convierte Apply now en el botón principal y añade un segundo botón con contorno. ## Da estilo a un botón principal y uno segundo Empieza con un botón en la página, como **Apply now**. 1. Pasa sobre el botón y abre **More > Settings**. 2. Fija **Type** en **Primary**. 3. Fija **Size** en **Large** y haz clic en **Save**. 4. Pasa sobre el botón de nuevo y abre **More > Clone**. La copia aparece justo bajo el original. 5. Abre **More > Settings** en la copia. Cambia su **Title**, por ejemplo a `Download brochure`, y su **Link**. 6. Activa **Outline style** y haz clic en **Save**. 7. Haz clic en **Save** en la barra. ## Escoge un estilo para cada acción | Acción | Estilo | Ejemplo | |---|---|---| | La única acción que más quieres | Sólido **Primary** | Apply now | | Una alternativa | **Outline style** en el mismo **Type** | Download brochure | | Una acción menor | **Link**, que parece un enlace de texto | Read the terms | | Un aviso o un paso final | **Danger** o **Warning** | Cancel my booking | Usa un botón sólido por sección, para que las visitas vean a la vez dónde hacer clic. Escribe etiquetas que dicen lo que pasa: "Get started" en lugar de "Click here", "Send message" en lugar de "Submit". ## Lo que ves Dos botones grandes se apilan en la columna: uno sólido con el color primario de tu tema y uno con contorno con borde y texto del mismo color. El sólido atrae la vista primero. Los enlaces no se abren mientras editas. Para probarlos, guarda la página, abre el menú de vista (el icono de ojo) y elige **Preview**. ## Ajustes | Ajuste | Qué hace | Predeterminado | |---|---|---| | **Type** | El estilo de color: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** o **Dark**. Los colores vienen de tu tema. | **Primary** | | **Outline style** | Un borde de color y texto sin relleno | Desactivado | | **Size** | **Normal**, **Large** o **Small** | **Normal** | | **Block button** | Estira el botón en todo el ancho de su columna | Desactivado | | **Link target** | **Same window** o **New window**. Se muestra cuando **Link** tiene un valor. | **Same window** | Para temas: cada **Type** añade la clase Bootstrap `btn-`, como `btn-primary`. Con **Outline style** activado, pasa a `btn-outline-`, salvo **Link**, que siempre queda `btn-link`. **Large** añade `btn-lg`, **Small** añade `btn-sm` y **Block button** añade `btn-block`. ## Si no ves el estilo - **El botón con contorno no muestra borde.** **Type** es **Link**, que siempre parece un enlace de texto, así que **Outline style** no tiene efecto. Elige otro **Type** para un botón con contorno. - **The button almost disappears.** **Light** es casi blanco, así que se funde en una sección blanca. Elige un **Type** más oscuro, o dale a la sección un color de fondo. - **El enlace se abre en la misma pestaña.** **Link target** es **Same window**, y solo se muestra cuando **Link** tiene un valor. Rellena **Link** primero, y elige **New window**. ## ¿Qué sigue? - [Añadir un botón](/es/hc/documentacion/aprender-dxpr-builder/elementos/boton): cada ajuste de botón, con un vídeo. - [Efectos hover](/es/hc/documentacion/aprender-dxpr-builder/diseno/efectos-hover): oscurece un botón o añade una sombra cuando el puntero lo alcanza. - [Color y marca](/es/hc/documentacion/aprender-dxpr-builder/diseno/colores-marca): mantén los colores de botones en línea con tu marca.