Botones

Use los estilos de botones personalizados de Resim y por ti para acciones en formularios, cuadros de diálogo y más con soporte para múltiples tamaños, estados y más.

Botones normales

Los botones normales tienen una sombra de cuadro que aumenta cuando se hace click. Este es el estilo predeterminado.

<div class="row">

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--primary ripple btn--block">PRIMARY</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--secondary ripple btn--block">SECONDARY</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--third ripple btn--block">THIRD</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--info ripple btn--block">INFO</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--danger ripple btn--block">DANGER</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--warning ripple btn--block">WARNING</button>
   </div>
   <div class="col-md-4 col-sm-12">
      <button class="btn bg--gray ripple btn--block">GRAY</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn bg--success ripple btn--block">SUCCESS</button> 
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn bg--dark ripple btn--block">DARK</button> 
   </div>

</div>
  

Botones outline

Los botones outline heredan sus bordes del color actual aplicado.

<div class="row">
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-primary ripple btn--block">PRIMARY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-secondary ripple btn--block">SECONDARY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-third ripple btn--block">THIRD</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-info ripple btn--block">INFO</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-danger ripple btn--block">DANGER</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-warning ripple btn--block">WARNING</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-gray ripple btn--block">GRAY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-success ripple btn--block">SUCCESS</button>
   </div>

   <div class="col-md-4 col-sm-12">
      <button class="btn btn--outline text-dark ripple btn--block">DARK</button>
   </div>

</div>

Botones Flat

Los botones flat no tienen sombra de cuadro ni fondo. Solo al pasar el mouse se muestra el contenedor del botón.

<div class="row">
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-primary ripple btn--block">PRIMARY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-secondary ripple btn--block">SECONDARY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-third ripple btn--block">THIRD</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-info ripple btn--block">INFO</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-danger ripple btn--block">DANGER</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-warning ripple btn--block">WARNING</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-gray ripple btn--block">GRAY</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-success ripple btn--block">SUCCESS</button>
   </div>
   
   <div class="col-md-4 col-sm-12">
      <button class="btn btn--flat text-dark ripple btn--block">DARK</button>
   </div>

</div>