# Botones Archivo `componentes/_buttons.scss` [(ver)](https://github.com/escueladigital/EDteam-StyleGuides/blob/master/dev/scss/components/_buttons.scss) --- Los botones se obtienen con la clase `button`. ```html Soy un botón ``` Soy un boton Para agregar separaciones utilice las clases de márgenes de EDgrid. ```html Soy un botón Soy un segundo botón ```

## 1. Colores de los botones Use las clases `first-color`, `second-color`, `third-color`, `accent-color`, `dark-color`, `text-color`, `light-color` para obtener botones con los colores de EDteam. Por defecto, la clase `button` da un botón azul, pero si necesita forzar el color azul use `first-color`. ```html .button.first-color .button.second-color .button.third-color .button.accent-color .button.dark-color .button.text-color .button.light-color ```

.button.first-color .button.second-color .button.third-color .button.accent-color .button.dark-color .button.text-color .button.light-color

## 2. Alinear botones Los botones pueden alinearse por su contenedor o por ellos mismos. Por el contedor use las clase de EDgrid para alienar contenido, y para alinear al mismo botón use las clases de EDgrid de alineación de elementos. Ver alineación en EDgrid Si desea que un botón ocupe todo el ancho disponible, agregue la clase `.full` ```html Soy un botón full ```

Soy un botón full

## 3. Botones fantasma (ghost) Los botones fantasma tienen fondo transparente y solo constan de borde y texto. Se usa la clase `ghost`. Ejemplo: ```html Soy un botón fantasma ```

Soy un botón fantasma

Para conseguir los colores, use las clases indicadas en la sección anterior `first-color`, `second-color`, `third-color`, `accent-color`, `dark-color` y `light-color` (este último es blanco, úselo sobre fondos oscuros). ```html button.ghost.first-color button.ghost.second-color button.ghost.third-color button.ghost.accent-color button.ghost.dark-color button.ghost.light-color ```

button.ghost button.ghost.second-color button.ghost.third-color button.ghost.accent-color button.ghost.dark-color button.ghost.text-color button.ghost.light-color

## 4. Tamaños de los botones Usando las clases `.big`, `.small` y `.tiny` al botón (ya sea normal o fantasma) puede variar su tamaño. ```html .button.big .button .button.small .button.tiny .button.micro ```

.button.big .button .button.small .button.tiny .button.micro

```html Boton grande Botón normal Boton pequeño Botón diminuto Botón micro Botón micro ```

.button.ghost.big .button.ghost .button.ghost.small .button.ghost.tiny .button.ghost.micro

## 5. Botón desactivado. Use la clase `disabled` para mostrar un botón como desactivado. ```html .button.disabled.big .button.disabled .button.disabled.small .button.disabled.tiny .button.disabled.micro ```

.button.disabled.big .button.disabled .button.disabled.small .button.disabled.tiny .button.disabled.micro

## 6. Uso de los colores Los colores de los botones deben respetar las siguientes guias * El botón por defecto `first-color` es para acciones predeterminadas como envios de formularios * El botón rojo `third-color` normal o ghost, es para indicar otro tipo de acciones, como compras. * El boton amarillo `accent-color` normal o ghost, es para llamados a la acción como descuentos, suscripciones, ofertas, etc. * El boton gris `text-color` es para cancelar en cuadros de diálogo. Los otros botones: celeste (second), gris oscuro (dark) y blanco (light) sí pueden usarse con fines decorativos.