# Botones

Mediante la clase `.btn` podemos aplicar estilo a los elementos tipo `button`. Esta clase la podemos combinar con `.btn-default`, `.btn-primary`, `.btn-success`, `.btn-info`, `.btn-warning`, `.btn-danger`, `.btn-link` para crear botones para diferentes estados o acciones en nuestros formularios:

![Botones](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOhKQWpsWDNNp9vL%2Fbuttons1.png?generation=1577179025353137\&alt=media)

El código HTML que tendríamos que escribir para conseguir estos botones es el siguiente:

```markup
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
```

## Tamaño de los botones

Podemos variar el tamaño de los botones simplemente añadiendo las clases `.btn-lg`, `.btn-sm`, o `.btn-xs`:

```markup
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```

Los botones del código anterior se mostrarían de la forma:

![Tamaño de los botones](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOhMu4HUrvOu6umA%2Fbuttons_sizes.png?generation=1577179025555439\&alt=media)

## Elementos tipo botón

El estilo tipo botón no solo lo podemos aplicar sobre las etiquetas `button` sino que funcionará de la misma forma con `<a>` y `<input>`:

```markup
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
```

Todos estos elementos se renderizarán de la misma forma:

![Elementos tipo botón](https://2314405326-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxd5Ij-3wFpElqL%2F-LwrBKvBMchIeck8DU34%2F-LwrBOhOOQrpuKBx5LRE%2Fbutton_elements.png?generation=1577179025837894\&alt=media)