Primary Success Danger Warning Info Default

Primary Success Danger Warning Info Default

<button class="btn ripple btn-primary mr-2" type="button">Primary</button>
<button class="btn ripple btn-success mr-2" type="button">Success</button>
<button class="btn ripple btn-danger mr-2" type="button">Danger</button>
<button class="btn ripple btn-warning mr-2" type="button">Warning</button>
<button class="btn ripple btn-info mr-2" type="button">Info</button>
<button class="btn ripple btn-default mr-2" type="button">Default</button>

<button class="btn ripple btn-primary mr-2 rounded-full" type="button">Primary</button>
<button class="btn ripple btn-success mr-2 rounded-full" type="button">Success</button>
<button class="btn ripple btn-danger mr-2 rounded-full" type="button">Danger</button>
<button class="btn ripple btn-warning mr-2 rounded-full" type="button">Warning</button>
<button class="btn ripple btn-info mr-2 rounded-full" type="button">Info</button>
<button class="btn ripple btn-default mr-2 rounded-full" type="button">Default</button>

Outline Success Danger Warning Info Default

Outline Success Danger Warning Info Default

<button class="mr-2 btn btn-primary-outline" type="button">Outline</button>
<button class="mr-2 btn btn-primary-outline" type="button">Success</button>
<button class="mr-2 btn btn-danger-outline" type="button">Danger</button>
<button class="mr-2 btn btn-warning-outline" type="button">Warning</button>
<button class="mr-2 btn btn-info-outline" type="button">Info</button>
<button class="mr-2 btn btn-default-outline" type="button">Default</button>

<button class="mr-2 btn btn-primary-outline rounded-full" type="button">Outline</button>
<button class="mr-2 btn btn-primary-outline rounded-full" type="button">Success</button>
<button class="mr-2 btn btn-danger-outline rounded-full" type="button">Danger</button>
<button class="mr-2 btn btn-warning-outline rounded-full" type="button">Warning</button>
<button class="mr-2 btn btn-info-outline rounded-full" type="button">Info</button>
<button class="mr-2 btn btn-default-outline rounded-full" type="button">Default</button>

Outline Success Danger Warning Info Default

<button class="mr-2 btn btn-primary raised" type="button">Outline</button>
<button class="mr-2 btn btn-success raised" type="button">Success</button>
<button class="mr-2 btn btn-danger raised" type="button">Danger</button>
<button class="mr-2 btn btn-warning raised"  type="button">Warning</button>
<button class="mr-2 btn btn-info raised" type="button">Info</button>
<button class="mr-2 btn btn-default raised" type="button">Default</button>

Primary Block Primary Block Primary Block Primary Block

<button class="btn mb-2 btn btn-block btn-primary" type="button">Primary Block</button>
<button class="btn mb-2 btn btn-block btn-primary-outline" type="button">Primary Block</button>
<button class="btn mb-2 btn btn-block btn-primary rounded-full" type="button">Primary Block</button>
<button class="btn mb-2 btn btn-block btn-primary-outline rounded-full" type="button">Primary Block</button>

<div class="btn-groups mr-2">
    <button class="btn-primary">Prev</button>
    <button class="btn-primary">Next</button>
</div>

<div class="btn-groups-pill mr-2">
    <button class="btn-primary">left</button>
    <button class="btn-primary">middle</button>
    <button class="btn-primary">right</button>
</div>

<div class="btn-groups mr-2">
  <button class="btn-primary">left</button>
  <button class="btn-primary">middle</button>
  <button class="btn-primary">right</button>
</div>

Download

<button class="btn btn-success mr-2">
  <i class="i-Download1 mr-2 font-bold"></i>
  <span class="text-white">Download</span>
</button>

<button class="btn-icon btn-primary mr-2">
  <i class="i-Bell p-1"></i>
</button>

<button class="btn-icon btn-danger-outline mr-2">
  <i class="i-Bell p-1"></i>
</button>

Facebook Google + Twitter Instagram Youtube Linkedin Dribble

<button class="btn btn-facebook m-1">
  <i class="i-Facebook-2 mr-2"></i>
  <span class="text-white">Facebook</span>
</button>
<button class="btn btn-google m-1">
  <i class="i-Google-Plus mr-2"></i>
  <span class="text-white">Google +</span>
</button>
<button class="btn btn-twitter m-1">
  <i class="i-Twitter mr-2"></i>
  <span class="text-white">Twitter</span>
</button>
<button class="btn btn-instagram m-1">
    <i class="i-Instagram mr-2"></i>
    <span class="text-white">Instagram</span>
</button>
<button class="btn btn-youtube m-1">
  <i class="i-Youtube mr-2"></i>
  <span class="text-white">Youtube</span>
</button>
<button class="btn btn-linkedin m-1">
  <i class="i-Linkedin-2 mr-2"></i>
  <span class="text-white">Linkedin</span>
</button>
<button class="btn btn-dribble m-1">
  <i class="i-Dribble mr-2"></i>
  <span class="text-white">Dribble</span>
</button>


<button class="btn btn-facebook m-1">
  <i class="i-Facebook-2"></i>
</button>
<button class="btn btn-google m-1">
  <i class="i-Google-Plus"></i>
</button>
<button class="btn btn-twitter m-1">
  <i class="i-Twitter"></i>
</button>
<button class="btn btn-instagram m-1">
  <i class="i-Instagram"></i>
</button>
<button class="btn btn-youtube m-1">
  <i class="i-Youtube"></i>
</button>
<button class="btn btn-linkedin m-1">
  <i class="i-Linkedin-2"></i>
</button>
<button class="btn btn-dribble m-1">
  <i class="i-Dribble"></i>
</button>


<button class="btn-icon btn-facebook m-1">
  <i class="i-Facebook-2 text-white p-1"></i>
</button>
<button class="btn-icon btn-google m-1">
  <i class="i-Google-Plus text-white p-1"></i>
</button>
<button class="btn-icon btn-twitter m-1">
  <i class="i-Twitter text-white p-1"></i>
</button>
<button class="btn-icon btn-instagram m-1">
  <i class="i-Instagram text-white p-1"></i>
</button>
<button class="btn-icon btn-youtube m-1">
  <i class="i-Youtube text-white p-1"></i>
</button>
<button class="btn-icon btn-linkedin m-1">
    <i class="i-Linkedin-2 text-white p-1"></i>
</button>
<button class="btn-icon btn-dribble m-1">
  <i class="i-Dribble text-white p-1"></i>
</button>