Hay muchos tipos de botones en Ionic, y todos tienen animaciones para mejorar al experiencia de usuario.

La clase principal de los botones es button, la cual debe de aplicarse a todos nuestros botones y se utiliza también como prefijo al trabajar con subclases.

Hay que tener en cuenta que aunque nosotros en casi todos los ejemplos utilicemos la etiqueta button, es posible introducir las clases de los botones en otras etiquetas como «a».

Botones de ancho completo

Este tipo de botones ocupa el 100% del su contenedor y pueden o no tener un pequeño padding.

Para crear estos botones tenemos que utilizar dos clases:

• button-block: si queremos que tenga el pequeño padding
• button-full: si no queremos que lo tenga

En el siguiente ejemplo vemos cómo funcionan y además añadimos un botón sobre un enlace.

<button class="button button-block">
   button-block
</button>
<button class="button button-full">
   button-full
</button>
<a href="" class="button button-block">Boton con etiqueta a</a>

Y su resultado:

Tamaños del botón

Los botones en Ionic pueden tener dos tamaños y vienen determinados por dos clases:

• button-small: para botones pequeños
• button-large: para botones grandes

En el siguiente ejemplo podemos ver el funcionamiento de estas dos clases:

<button class="button button-small">
   button-small
</button>
<button class="button button-large">
   button-large
</button>

Que nos da de resultado

Colores en los botones

Podemos darle colores a nuestros botones según nos interese utilizando la clase button-[color]. Dónde [color] hace referencia al tipo de color que ya vimos.

En el siguiente ejemplo vamos a colocar un botón energized:

<button class="button button-energized">
   button-energized
</button>

Que nos crea el siguiente botón:

Bordes en el botón

Dependiendo del dispositivo los botones aparecerán o no con borde por defecto, pero podemos hacer que aparezcan como queramos utilizando las clases:

• button-outline: para que tenga borde
• button-clear: para que no lo tenga

En el siguiente ejemplo vemos como utilizar estas clases con colores:

<button class="button button-assertive button-outline">
   button-outline
</button>
<button class="button button-assertive button-clear">
   button-clear
</button>

Añadiendo iconos

También podemos añadir iconos a los botones utilizando la clase icon.

Si queremos determinar el lugar del icono en el botón, a izquierda o derecha, se puede hacer utilizando las clases icon-left o icon-right

Para ver cómo funcionan los iconos vamos a verlo en el siguiente ejemplo:

<button class="button icon ion-home">
</button>
<button class="button icon icon-left ion-home">
   Home
</button>
<button class="button icon icon-right ion-home">
   Home
</button>

Y el resultado:

Barra de botones

Para terminar, también podemos crear un grupo de botones utilizando la clase button-bar dentro de un div, de la siguiente forma:

<div class="button-bar">
   <a class="button button-positive">1</a>
   <a class="button button-assertive">2</a>
   <a class="button button-energized">3</a>
   <a class="button">4</a>
</div>

Lo cual nos da como resultado:

Con esto ya podemos ir creando nuestros botones en Ionic para nuestras aplicaciones e ir dando forma a nuestros contenidos.

Si te ha servido o resultado interesante, tienes dudas, quieres aportar algo… comenta y comparte.