<button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-transparent">Transparent</button>
      <button type="button" class="btn btn-white">White</button>
    
                

    
      <!-- Rounded button -->
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-inverse">inverse</button>

      <!-- Outlined button -->
      <a class="btn btn-secondary-outlined" href="#" role="button">secondary</a>
      <button class="btn btn-primary-outlined" type="submit">primary</button>
      <button class="btn btn-success-outlined" type="submit">success</button>
      <button class="btn btn-info-outlined" type="submit">info</button>
      <button class="btn btn-warning-outlined" type="submit">warning</button>
      <button class="btn btn-danger-outlined" type="submit">danger</button>
      <button class="btn btn-inverse-outlined" type="submit">inverse</button>

      <!-- Rounded button -->
      <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
      <button type="button" class="btn btn-primary btn-rounded">Primary</button>
      <button type="button" class="btn btn-success btn-rounded">Success</button>
      <button type="button" class="btn btn-info btn-rounded">Info</button>
      <button type="button" class="btn btn-warning btn-rounded">Warning</button>
      <button type="button" class="btn btn-danger btn-rounded">Danger</button>
      <button type="button" class="btn btn-inverse btn-rounded">inverse</button>
    
                

    
      <!-- small button -->
      <button type="button" class="btn btn-secondary btn-sm">Small</button>
      <button type="button" class="btn btn-primary btn-sm">Small</button>

      <!-- medium button -->
      <button type="button" class="btn btn-secondary btn-mid">Medium </button>
      <button type="button" class="btn btn-primary btn-mid">Medium </button>

      <!-- Large button -->
      <button type="button" class="btn btn-secondary btn-lg">Large </button>
      <button type="button" class="btn btn-primary btn-lg">Large </button>

      <!-- Default button -->
      <button type="button" class="btn btn-secondary btn-default">default </button>
      <button type="button" class="btn btn-primary btn-default">default </button>

      <!-- button with icon -->
      <button type="button" class="btn btn-secondary btn-default"><i class="fa fa-facebook-f"></i> iconic </button>
      <button type="button" class="btn btn-primary btn-default"><i class="fa fa-bitbucket"></i> iconic </button>

      <!-- block level button -->
      <button type="button" class="btn btn-primary btn-block">Block level button</button>
      <button type="button" class="btn btn-secondary btn-block">Block level button</button>
    

                

    
      <!-- button with icon -->
      <button type="button" class="btn btn-primary btn-icon"><i class="fa fa-user"></i> iconic </button>
      <button type="button" class="btn btn-success btn-icon" type="submit"><i class="fa fa-user"></i> iconic</button>

      <!-- Social buttons -->
      <button class="btn btn-social facebook"><i class="fa fa-facebook-f"></i></button>
      <button class="btn btn-social twitter"><i class="fa fa-twitter"></i></button>
      
      <!-- With hover effect-->
      <button class="btn btn-social btn-social-o facebook">
        <i class="fa fa-facebook-f"></i>
      </button>
      <button class="btn btn-social btn-social-o twitter">
        <i class="fa fa-twitter"></i>
      </button>
      <button class="btn btn-social btn-social-o pinterest">
        <i class="fa fa-pinterest-p"></i>
      </button>
      <button class="btn btn-social btn-social-o skype">
        <i class="fa fa-skype"></i>
      </button>
      <button class="btn btn-social btn-social-o linkedin">
        <i class="fa fa-linkedin"></i>
      </button>
      <button class="btn btn-social btn-social-o google-plus">
        <i class="fa fa-google-plus"></i>
      </button>
      <button class="btn btn-social btn-social-o youtube">
        <i class="fa fa-youtube"></i>
      </button>

      <!-- Social cicle button -->
      <button class="btn btn-social btn-cicle facebook"><i class="fa fa-facebook-f"></i></button>
      <button class="btn btn-social btn-cicle twitter"><i class="fa fa-twitter"></i></button>

      <!-- Social outlined button -->
      <button class="btn btn-social outlined pinterest"><i class="fa fa-pinterest-p"></i></button>
      <button class="btn btn-social outlined skype"><i class="fa fa-skype"></i></button>

      <!-- Social Rounded button -->
      <button class="btn btn-social rounded twitter"><i class="fa fa-twitter"></i></button>
      <button class="btn btn-social rounded pinterest"><i class="fa fa-pinterest-p"></i></button>

      <!-- Social button with title -->
      <button class="btn btn-social titled twitter"><i class="fa fa-twitter"></i> twitter</button>
      <button class="btn btn-social titled pinterest"><i class="fa fa-pinterest-p"></i> pinterest</button>