Elige estilos de botón que guían a las visitas.
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.
Da estilo a un botón principal y uno segundo
Empieza con un botón en la página, como Apply now.
- Pasa sobre el botón y abre More > Settings.
- Fija Type en Primary.
- Fija Size en Large y haz clic en Save.
- Pasa sobre el botón de nuevo y abre More > Clone. La copia aparece justo bajo el original.
- Abre More > Settings en la copia. Cambia su Title, por ejemplo a
Download brochure, y su Link. - Activa Outline style y haz clic en Save.
- 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-<type>, como btn-primary. Con Outline style activado, pasa a btn-outline-<type>, 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: cada ajuste de botón, con un vídeo.
- Efectos hover: oscurece un botón o añade una sombra cuando el puntero lo alcanza.
- Color y marca: mantén los colores de botones en línea con tu marca.