button_hover_reveal.html

button_hover_reveal.html

<div class="container py-5">
   <!-- H1 heading purpose only -->
   <h1 class="text-center font-weight-light text-dark mb-5 pb-3 display-4">Bootstrap 4 <em class="px-2 bg-warning">Hover</em> Button Icon</h1>
   <!-- Rounded Button | Font Awesome -->   
   <h1 class="font-weight-light">Font Awesome</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="fa fa-chevron-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="fa fa-chevron-left fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="fa fa-arrow-left fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="fa fa-heart"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="fa fa-heart fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="fa fa-long-arrow-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="fa fa-arrow-circle-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="fa fa-pencil"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="fa fa-pencil fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Flatted Button | Open Iconic -->
   <h1 class="font-weight-light">Open Iconic</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-flat">
            <i class="oi oi-bolt"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="oi oi-bolt fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-flat">
            <i class="oi oi-droplet"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="oi oi-droplet fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-flat">
            <i class="oi oi-key"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="oi oi-key fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-flat">
            <i class="oi oi-check"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="oi oi-check fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-flat">
            <i class="oi oi-arrow-circle-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="oi oi-arrow-circle-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-flat">
            <i class="oi oi-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="oi oi-arrow-left fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Standard Button | Material Design Icons -->
   <h1 class="font-weight-light">Material Design Icons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed">
            <i class="mdi mdi-codepen"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="mdi mdi-codepen fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed">
            <i class="mdi mdi-silverware"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="mdi mdi-silverware fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed">
            <i class="mdi mdi-coffee"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="mdi mdi-coffee fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed">
            <i class="mdi mdi-plus-outline"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="mdi mdi-plus-outline fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed">
            <i class="mdi mdi-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="mdi mdi-arrow-left fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed">
            <i class="mdi mdi-skull"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="mdi mdi-skull fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Rounded Button | Ionicons -->
   <h1 class="font-weight-light">Ionicons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-checkmark"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="icon ion-md-checkmark fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-send"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="icon ion-md-send fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="icon ion-logo-codepen"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="icon ion-logo-codepen fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-pizza"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="icon ion-md-pizza fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-exit"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="icon ion-md-exit fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="icon ion-md-contract"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="icon ion-md-contract fa-2x"></i>
         </div>
      </div>   
   </div>
   
   <!-- Rounded Button | Typicons -->
   <h1 class="font-weight-light">Typicons</h1>
   <div class="row my-4">
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-arrow-left"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-primary my-3">
            <i class="typcn typcn-arrow-left fa-2x"></i>
         </div>   
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-thumbs-up"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-warning my-3">
            <i class="typcn typcn-thumbs-up fa-2x"></i>
         </div>
      </div>
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-message-typing"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-danger my-3">
            <i class="typcn typcn-message-typing fa-2x"></i>
         </div>
      </div>     
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-pin"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-info my-3">
            <i class="typcn typcn-pin fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
          <button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-warning"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-success my-3">
            <i class="typcn typcn-warning fa-2x"></i>
         </div>
      </div>      
      <div class="col-md-2 text-center">
         <!-- button classes -->
         <button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
            <i class="typcn typcn-infinity-outline"></i> <span class="spn">Submit</span>
         </button>
         <div class="text-secondary my-3">
            <i class="typcn typcn-infinity-outline fa-2x"></i>
         </div>
      </div>   
   </div>
   
</div>