Buttons

El típico boton, con diferentes colores, tamaños y estados. Ideal para links con angular.

btn Cómo se usa

Primeramente pondremos la clase de definición.btn después su modificador de tipo .link-btn y por último su tamaño si lo tiene .btn-xs.

Qué és?+Tipo + Tamaño

btn
<div class="btn">boton</div>
Botones tamaños

5 tipos de tamaños

mini
small
medium
large
xlarge
<div class="btn btn-primary btn--mini">mini</div>
<div class="btn btn-primary btn--small">small</div>
<div class="btn btn-primary btn--medium">medium</div>
<div class="btn btn-primary btn--large">large</div>
<div class="btn btn-primary btn--xlarge">xlarge</div>
Botón Full

Un botón al 100% de ancho

full
<div class="btn btn-primary  btn--full">full</div>
Phantom Button

boton invertido .btn-phantom

mini
small
medium
large
xlarge
<div class="btn btn-phantom  btn--mini">mini</div>
<div class="btn btn-phantom  btn--small">small</div>
<div class="btn btn-phantom  btn--medium">medium</div>
<div class="btn btn-phantom  btn--large">large</div>
<div class="btn btn-phantom  btn--xlarge">xlarge</div>
Icons Buttons

Botón con icono , al principio y al final

ACTIVE

Action
.
Action
.
Action

DISABLED

Action
.
Action
.
Action
Action
.
Action
.
Action
Action
.
Action
.
Action 
 
<div class="btn btn-primary  btn--medium  "> No icon </div>
<div class="btn btn-primary  btn--medium icon-pre "> icon-pre </div>
<div class="btn btn-primary  btn--medium  icon-post "> icon-post </div>
Grupal Button

grupal extensible

boton largo
btn btn-phantom 
										
<div class="row">
	<div class="col-xs-6">
		<div class="btn btn-primary btn-block">
			boton largo
		</div>
	</div>
	<div class="col-xs-6">
		<div class="btn btn-phantom btn-block">
			btn btn-phantom
		</div>
	</div>
</div>

Boton grupal

btn-group-inline

Boton 1
Boton 2 
 
<div class="btn-group-inline">
<div class="btn btn-phantom btn--medium ">Boton 1</div>
<div class="btn btn-phantom btn--medium ">Boton 2 </div>
</div>
Inline Button

Sin espacios 


<div class="btn-group">
	<button class="btn btn-phantom btn--mini"> mini</button>
	<button class="btn btn-phantom btn--medium"> medium</button>
	<button class="btn btn-phantom btn--large"> large</button>
</div>
underline btn

btn-link

boton link
boton link 
 
<a class="btn btn-link"href="">boton link</a> 
		
<div class="has-light guide-dark-bg">
	<a class="btn btn-link"href="">boton link</a> 
</div>