Skip to content
Cactus CSS

Botones

Estas clases proporcionan estilos y comportamientos básicos para crear botones y elementos interactivos similares en tu sitio web.

Clase btn

Crea un botón con fondo, color de texto, borde, transición y efectos predefinidos.

<button class="btn">Principal</button>

Resultado

Personalizar

Cactus CSS proporciona clases de utilidad para personalizar el color de fondo, el borde y el color de texto de los botones.

Color de Fondo

Para añadir colores solo tienes que agregar la clase refiriéndote al color (conoce todas las clases de colores aquí). Ejemplo:

<button class="btn blue">Azul</button>
<button class="btn red">Red</button>
<button class="btn secondary">Secondary</button>

Resultado:

Color del Texto

Para cambiar el color de texto agrega la clase txt- y la clase de color (conoce todas las clases de colores aquí). Ejemplo:

<button class="btn blue txt-white">Azul</button>
<button class="btn primary txt-black">Primary</button>
<button class="btn accent txt-secondary">Accent</button>

Resultado:

Borde de color

Para cambiar el color de borde agrega la clase br- y la clase de color (conoce todas las clases de colores aquí). Ejemplo:

<button class="btn blue br-white">Azul</button>
<button class="btn yellow txt-black br-black">Amarillo</button>
<button class="btn accent txt-secondary br-primary">Accent</button>

Resultado:

Chip

Crea un botón o elemento interactivo con estilo más ligero y redondeado, a menudo usado como etiqueta o filtro. (Hereda la mayoría de las propiedades de .btn)

<button class="chip">Abrir</button>

Resultado: