Introduction

Stylizer offers you a flat customizable modern button, the framework offers you 4 types of buttons :

• Default Button.
• Floating action button.
• Flat buttons.
• Link buttons.

Default

You can create a button by using the class .btn.

<button class="btn">Button</button>            
          

Colored Buttons

Stylizer is created to be easy and flat, the framework offers you 17 color.

Basic Color :

Primary Success Warning Error

Code :

<button class="btn btn-primary">primary</button>   
<button class="btn btn-success">success</button> 
<button class="btn btn-warning">warning</button> 
<button class="btn btn-error">error</button>          
          

Button Color

Black Grey white Teal Indigo DeepPurple Pink Yellow Lime Brown

Code :

<button class="btn btn-black">black</button>   
<button class="btn btn-grey">grey</button> 
<button class="btn btn-white">white</button> 
<button class="btn btn-teal">teal</button>  
<button class="btn btn-indigo">indigo</button>   
<button class="btn btn-deepPurple">deepPurple</button> 
<button class="btn btn-pink">pink</button> 
<button class="btn btn-yellow">yellow</button> 
<button class="btn btn-lime">lime</button> 
<button class="btn btn-brown">brown</button>          
          

Floating action button

Floating action buttons (or FAB) are: “A special case of promoted actions. They are distinguished by a circled icon floating above the UI and have special motion behaviors, related to morphing, launching, and its transferring anchor point.”

Example :

S

Code :

         <!-- Default fab button -->   
<button class="btn btn-fab">S</button>   
         <!-- Colored fab button --> 
<button class="btn btn-fab btn-pink">S</button> 
         <!-- Icon fab button --> 
<button class="btn btn-fab"><i class="fas fa-spinner"></i></button>          
          

Link Button

The link button in Stylizer are similar to default button, but does not contain a border and background color.

You can create a link button by using the class : .btn-link.

Example :

Button Link

Code :

<button class="btn btn-link">Link</button>            
          

Flat Button

You can create a flat button by using the class : .btn-flat.

Example :

Button

<button class="btn btn-flat">button</button>            
          

Button Options

You can customize you button by using simple class.

Button Size

Buttons in Stylizer have 4 size :

Large Normal Small extra small

Code :

         <!-- Large button -->   
<button class="btn btn-lg">Button</button>   
         <!-- Normal button --> 
<button class="btn">button</button>
         <!-- Small button -->   
<button class="btn btn-sm">Button</button>   
         <!-- extra small button --> 
<button class="btn btn-xs">button</button>  

         <!-- Normal fab button -->   
<button class="btn btn-fab">S</button>   
         <!-- Mini fab button --> 
<button class="btn btn-fab btn-fab-mini">S</button>         
          

Icon Button

you can indicate the position of the icon by using the class : .right inside the i tag.

Default icon button :

Button

Icon on the right of the button :

Button

Code :

         <!-- normal icon button -->   
<button class="btn btn-success"><i class="fas fa-spinner"></i> Button</button>   
         <!-- Right icon button --> 
<button class="btn btn-primary"><i class="fas fa-spinner right"></i> button</button>
          

Disabled Button

You can define the disabled option for the button by using the class .disabled

Disabled

<button class="btn disabled">Button</button>
           <!-- OR -->
<button class="btn" disabled>Button</button>                       
          

Button Grouped

Code :

<div class="button-group">
  <button class="btn-grp"><i class="fab fa-spinner"></i></button> 
  <button class="btn-grp"><i class="fab fa-spinner"></i></button>
  <button class="btn-grp"><i class="fab fa-spinner"></i></button>
</div>                      
          

Button Block

You can use the block buttons by using the class : .btn-block

Default Button

Code :

<button class="btn btn-block">Button</button>