keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Buttons

Buttons.

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Click here

Variants

Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.

WHITE BUTTON
PRIMARY BUTTON
SECONDARY BUTTON
DANGER BUTTON
SUCCESS BUTTON
WARNING BUTTON
INFO BUTTON
DARK BUTTON
LIGHT BUTTON

<button type="button" class="btn btn-white">Button</button>
<button type="button" class="btn btn-outline-white">Button</button>
<button type="button" class="btn btn-white light">Button</button>
<button type="button" class="btn btn-white active">Button</button>
<button type="button" class="btn text-black btn-link">Button</button>

<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-outline-primary">Button</button>
<button type="button" class="btn btn-primary light">Button</button>
<button type="button" class="btn btn-primary active">Button</button>
<button type="button" class="btn btn-link">Button</button>

<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-outline-secondary">Button</button>
<button type="button" class="btn btn-secondary light">Button</button>
<button type="button" class="btn btn-secondary active">Button</button>
<button type="button" class="btn text-secondary btn-link">Button</button>

<button type="button" class="btn btn-danger">Button</button>
<button type="button" class="btn btn-outline-danger">Button</button>
<button type="button" class="btn btn-danger light">Button</button>
<button type="button" class="btn btn-danger active">Button</button>
<button type="button" class="btn text-danger btn-link">Button</button>

<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-outline-success">Button</button>
<button type="button" class="btn btn-success light">Button</button>
<button type="button" class="btn btn-success active">Button</button>
<button type="button" class="btn text-success btn-link">Button</button>

<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-outline-warning">Button</button>
<button type="button" class="btn btn-warning light">Button</button>
<button type="button" class="btn btn-warning active">Button</button>
<button type="button" class="btn text-warning btn-link">Button</button>

<button type="button" class="btn btn-info">Button</button>
<button type="button" class="btn btn-outline-info">Button</button>
<button type="button" class="btn btn-info light">Button</button>
<button type="button" class="btn btn-info active">Button</button>
<button type="button" class="btn text-info btn-link">Button</button>

<button type="button" class="btn btn-dark">Button</button>
<button type="button" class="btn btn-outline-dark">Button</button>
<button type="button" class="btn btn-dark light">Button</button>
<button type="button" class="btn btn-dark active">Button</button>
<button type="button" class="btn text-dark btn-link">Button</button>

<button type="button" class="btn btn-light">Button</button>
<button type="button" class="btn btn-outline-light">Button</button>
<button type="button" class="btn btn-light">Button</button>
<button type="button" class="btn btn-light active">Button</button>
<button type="button" class="btn text-light btn-link">Button</button>

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link 

<a class="btn btn-primary" href="javascript:void(0);" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.








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

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

<button type="button" class="btn btn-primary btn-xs">Extra Small button</button>
<button type="button" class="btn btn-secondary btn-xs">Extra Small button</button>

<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
Custom button
</button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.


<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

Link functionality caveat


<a href="javascript:void(0);" class="btn btn-primary disabled" tabindex="-1" role="button">Primary link</a>
<a href="javascript:void(0);" class="btn btn-secondary disabled" tabindex="-1" role="button">Link</a>

Block buttons

Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.




<div class="d-grid gap-2">
	<button class="btn btn-primary" type="button">Button</button>
	<button class="btn btn-primary" type="button">Button</button>
</div>

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Toggle states

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.


<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
  <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
  <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>

<p class="d-inline-flex gap-1">
  <a href="javascript:void(0);" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
  <a href="javascript:void(0);" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
  <a href="javascript:void(0);" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
  <a href="javascript:void(0);" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
  <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>

CTA Buttons

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.


<button type="button" class="btn btn-primary">
  Add To Cart
  <span class="separate-icon-end">
  	<i class="fa fa-shopping-cart"></i>
  </span>
</button>
<button type="button" class="btn btn-secondary">
  <span class="square-icon-start">
  	<i class="fa fa-shopping-cart"></i>
  </span>
  Add To Cart
</button>
<button type="button" class="btn btn-primary rounded-0">
  <span class="separate-icon-start">
  	<i class="fa fa-shopping-cart"></i>
  </span>
  Add To Cart
</button>
<button type="button" class="btn btn-secondary rounded-0">
  Add To Cart
  <span class="square-icon-end">
  	<i class="fa fa-shopping-cart"></i>
  </span>
</button>
<button type="button" class="btn btn-primary rounded-pill">
  Add To Cart
  <span class="separate-icon-end">
  	<i class="fas fa-times"></i>
  </span>
</button>
<button type="button" class="btn btn-secondary rounded-pill">
  Add To Cart
  <span class="square-icon-end">
  	<i class="fas fa-times"></i>
  </span>
</button>
<button type="button" class="btn btn-outline-primary">
  Add To Cart
  <span class="separate-icon-end">
  	<i class="fa fa-shopping-cart"></i>
  </span>
</button>
<button type="button" class="btn btn-outline-secondary">
  Add To Cart
  <span class="square-icon-end">
  	<i class="fa fa-shopping-cart"></i>
  </span>
</button>

Button Style


<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary rounded-0">Button</button>
<button type="button" class="btn btn-primary rounded-pill">Button</button>
<button type="button" class="btn btn-primary shadow">Button</button>
<button type="button" class="btn btn-outline-primary">Button</button>

Dropdown Button

Button Sizes Icon


<button type="button" class="btn btn-info">
	<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
	<span role="status">Loading...</span>
</button>
<button type="button" class="btn btn-primary">
	<i class="material-symbols-outlined">edit</i> Edit
</button>
<button type="button" class="btn btn-light">
	Download <i class="material-symbols-outlined">download</i>
</button>
<button type="button" class="btn btn-primary">
	<i class="material-symbols-outlined">diamond</i> Exclusive
</button>

Square Buttons

add .btn-square to change the style

Large Button
Default Button
Small Button

<button type="button" class="btn btn-square btn-lg btn-primary">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-primary light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-outline-light">
  <i class="material-icons">home</i>
</button>
	
<button type="button" class="btn btn-square btn-lg btn-primary rounded-circle">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-primary rounded-circle light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-outline-light rounded-circle">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-lg btn-primary rounded-0">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-primary rounded-0 light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-lg btn-outline-light rounded-0">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-info">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-info light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-outline-light">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-info rounded-circle">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-info rounded-circle light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-outline-light rounded-circle">
  <i class="material-icons">home</i>
</button>
	
<button type="button" class="btn btn-square btn-info rounded-0">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-info rounded-0 light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-outline-light rounded-0">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-sm btn-secondary">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-sm btn-secondary light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-sm btn-outline-light">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-secondary btn-sm rounded-circle">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-secondary btn-sm rounded-circle light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-outline-light btn-sm rounded-circle ">
  <i class="material-icons">home</i>
</button>

<button type="button" class="btn btn-square btn-secondary  btn-sm rounded-0">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-secondary btn-sm rounded-0 light">
  <i class="material-icons">home</i>
</button>
<button type="button" class="btn btn-square btn-outline-light btn-sm rounded-0">
  <i class="material-icons">home</i>
</button>

Social Buttons

add .btn-* name to change the style


<button type="button" class="btn btn-drive">
  <img src="assets/images/icons/social/drive-light.svg" alt=""> Drive
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/drive.svg" alt=""> Drive
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/drive.svg" alt=""> Drive
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/drive.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-drive">
  <img src="assets/images/icons/social/drive-light.svg" alt="">
</button>

<button type="button" class="btn btn-envato">
  <img src="assets/images/icons/social/envato-light.svg" alt=""> Envato
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/envato.svg" alt=""> Envato
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/envato.svg" alt=""> Envato
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/envato.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-envato">
  <img src="assets/images/icons/social/envato-light.svg" alt="">
</button>

<button type="button" class="btn btn-linkedin">
  <img src="assets/images/icons/social/linkedin-light.svg" alt=""> linkedin
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/linkedin.svg" alt=""> linkedin
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/linkedin.svg" alt=""> linkedin
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/linkedin.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-linkedin">
  <img src="assets/images/icons/social/linkedin-light.svg" alt="">
</button>

<button type="button" class="btn btn-skype">
  <img src="assets/images/icons/social/skype-light.svg" alt=""> Skype
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/skype.svg" alt=""> Skype
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/skype.svg" alt=""> Skype
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/skype.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-skype">
  <img src="assets/images/icons/social/skype-light.svg" alt="">
</button>

<button type="button" class="btn btn-flickr">
  <img src="assets/images/icons/social/flickr-light.svg" alt=""> Flickr
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/flickr.svg" alt=""> Flickr
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/flickr.svg" alt=""> Flickr
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/flickr.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-flickr">
  <img src="assets/images/icons/social/flickr-light.svg" alt="">
</button>

<button type="button" class="btn btn-photo">
  <img src="assets/images/icons/social/photo-light.svg" alt=""> Photo
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/photo.svg" alt=""> Photo
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/photo.svg" alt=""> Photo
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/photo.svg" alt="">	
</button>

<button type="button" class="btn  btn-square btn-md btn-photo">
  <img src="assets/images/icons/social/photo-light.svg" alt="">	
</button>

<button type="button" class="btn btn-behance">
  <img src="assets/images/icons/social/behance-light.svg" alt=""> Behance
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/behance.svg" alt=""> Behance
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/behance.svg" alt=""> Behance
</button>

<button type="button" class="btn btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/behance.svg" alt="">
</button>

<button type="button" class="btn btn-square btn-md btn-behance">
  <img src="assets/images/icons/social/behance-light.svg" alt="">
</button>

<button type="button" class="btn btn-vimeo">
  <img src="assets/images/icons/social/vimeo-light.svg" alt=""> vimeo
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/vimeo.svg" alt=""> vimeo
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/vimeo.svg" alt=""> vimeo
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/vimeo.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-vimeo">
  <img src="assets/images/icons/social/vimeo-light.svg" alt="">
</button>

<button type="button" class="btn btn-dropbox">
  <img src="assets/images/icons/social/dropbox-light.svg" alt=""> Dropbox
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/dropbox.svg" alt=""> Dropbox
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/dropbox.svg" alt=""> Dropbox
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/dropbox.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-dropbox">
  <img src="assets/images/icons/social/dropbox-light.svg" alt="">
</button>

<button type="button" class="btn btn-facebook">
  <img src="assets/images/icons/social/facebook-light.svg" alt=""> Facebook
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/facebook.svg" alt=""> Facebook
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/facebook.svg" alt=""> Facebook
</button>

<button type="button" class="btn btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/facebook.svg" alt="">
</button>

<button type="button" class="btn btn-square btn-md btn-facebook">
  <img src="assets/images/icons/social/facebook-light.svg" alt="">
</button>

<button type="button" class="btn btn-instagram">
  <img src="assets/images/icons/social/instagram-light.svg" alt=""> Instagram
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/instagram.svg" alt=""> Instagram
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/instagram.svg" alt=""> Instagram
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/instagram.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-instagram">
  <img src="assets/images/icons/social/instagram-light.svg" alt="">
</button>

<button type="button" class="btn btn-snapchat">
  <img src="assets/images/icons/social/snapchat-light.svg" alt=""> Snapchat
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/snapchat.svg" alt=""> Snapchat
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/snapchat.svg" alt=""> Snapchat
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/snapchat.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-snapchat">
  <img src="assets/images/icons/social/snapchat-light.svg" alt="">
</button>

<button type="button" class="btn btn-dribbble">
  <img src="assets/images/icons/social/dribbble-light.svg" alt=""> Dribbble
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/dribbble.svg" alt=""> Dribbble
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/dribbble.svg" alt=""> Dribbble
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/dribbble.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-dribbble">
  <img src="assets/images/icons/social/dribbble-light.svg" alt="">
</button>

<button type="button" class="btn btn-pinterest">
  <img src="assets/images/icons/social/pinterest-light.svg" alt=""> Pinterest
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/pinterest.svg" alt=""> Pinterest
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/pinterest.svg" alt=""> Pinterest
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/pinterest.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-pinterest">
  <img src="assets/images/icons/social/pinterest-light.svg" alt="">
</button>

<button type="button" class="btn btn-youtube">
  <img src="assets/images/icons/social/youtube-light.svg" alt=""> Youtube
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/youtube.svg" alt=""> Youtube
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/youtube.svg" alt=""> Youtube
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/youtube.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-youtube">
  <img src="assets/images/icons/social/youtube-light.svg" alt="">
</button>

<button type="button" class="btn btn-whatsapp">
  <img src="assets/images/icons/social/whatsapp-light.svg" alt=""> Whatsapp
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/whatsapp.svg" alt=""> Whatsapp
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/whatsapp.svg" alt=""> Whatsapp
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/whatsapp.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-whatsapp">
  <img src="assets/images/icons/social/whatsapp-light.svg" alt="">
</button>

<button type="button" class="btn btn-apple">
  <img src="assets/images/icons/social/apple-light.svg" alt=""> Apple
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/apple.svg" alt=""> Apple
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/apple.svg" alt=""> Apple
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/apple.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-apple">
  <img src="assets/images/icons/social/apple-light.svg" alt="">
</button>

<button type="button" class="btn btn-google-plus">
  <img src="assets/images/icons/social/google-plus-light.svg" alt=""> Google
</button>

<button type="button" class="btn btn-outline-light">
  <img src="assets/images/icons/social/google-plus.svg" alt=""> Google
</button>

<button type="button" class="btn btn-white active">
  <img src="assets/images/icons/social/google-plus.svg" alt=""> Google
</button>

<button type="button" class="btn  btn-square btn-md btn-outline-light">
  <img src="assets/images/icons/social/google-plus.svg" alt="">
</button>

<button type="button" class="btn  btn-square btn-md btn-google-plus">
  <img src="assets/images/icons/social/google-plus-light.svg" alt="">
</button>