Mono - Responsive Admin & Dashboard Template

Mono provides a variety of Social button components thats suit its design standards. To add a new social button first go to _variables.scss and create a variable for the color you want. Then go to _buttons.scss and make your own social button like other existing buttons. You can also use a social icon from material icon .

Social Buttons


<button type="button" class="mb-1 btn btn-icon facebook">
  <i class="mdi mdi-facebook"></i>
</button>

<button type="button" class="mb-1 btn btn-icon twitter">
  <i class="mdi mdi-twitter"></i>
</button>

<button type="button" class="mb-1 btn btn-icon google-plus">
  <i class="mdi mdi-google-plus"></i>
</button>

<button type="button" class="mb-1 btn btn-icon linkedin">
  <i class="mdi mdi-linkedin"></i>
</button>

<button type="button" class="mb-1 btn btn-icon pinterest">
  <i class="mdi mdi-pinterest"></i>
</button>

<button type="button" class="mb-1 btn btn-icon tumblr">
  <i class="mdi mdi-tumblr"></i>
</button>

<button type="button" class="mb-1 btn btn-icon vimeo">
  <i class="mdi mdi-vimeo"></i>
</button>

<button type="button" class="mb-1 btn btn-icon dropbox">
  <i class="mdi mdi-dropbox"></i>
</button>

<button type="button" class="mb-1 btn btn-icon dribbble">
  <i class="mdi mdi-dribbble"></i>
</button>

<button type="button" class="mb-1 btn btn-icon skype">
  <i class="mdi mdi-skype"></i>
</button>

Social Buttons with Icon & Text


<button type="button" class="mb-1 btn facebook">
  <i class="mdi mdi-facebook"></i>
  facebook
</button>

<button type="button" class="mb-1 btn twitter">
  <i class="mdi mdi-twitter"></i>
  twitter
</button>

<button type="button" class="mb-1 btn google-plus">
  <i class="mdi mdi-google-plus"></i>
  google-plus
</button>

<button type="button" class="mb-1 btn linkedin">
  <i class="mdi mdi-linkedin"></i>
  linkedin
</button>

<button type="button" class="mb-1 btn pinterest">
  <i class="mdi mdi-pinterest"></i>
  pinterest
</button>

<button type="button" class="mb-1 btn tumblr">
  <i class="mdi mdi-tumblr"></i>
  tumblr
</button>

<button type="button" class="mb-1 btn vimeo">
  <i class="mdi mdi-vimeo"></i>
  vimeo
</button>

<button type="button" class="mb-1 btn dropbox">
  <i class="mdi mdi-dropbox"></i>
  dropbox
</button>

<button type="button" class="mb-1 btn dribbble">
  <i class="mdi mdi-dribbble"></i>
  dribbble
</button>

<button type="button" class="mb-1 btn skype">
  <i class="mdi mdi-skype"></i>
  skype
</button>

Social Buttons with Text


<button type="button" class="mb-1 btn facebook">
  facebook
</button>

<button type="button" class="mb-1 btn twitter">
  twitter
</button>

<button type="button" class="mb-1 btn google-plus">
  google-plus
</button>

<button type="button" class="mb-1 btn linkedin">
  linkedin
</button>

<button type="button" class="mb-1 btn pinterest">
  pinterest
</button>

<button type="button" class="mb-1 btn tumblr">
  tumblr
</button>

<button type="button" class="mb-1 btn vimeo">
  vimeo
</button>

<button type="button" class="mb-1 btn dropbox">
  dropbox
</button>

<button type="button" class="mb-1 btn dribbble">
  dribbble
</button>

<button type="button" class="mb-1 btn skype">
  skype
</button>

Social Circle Buttons


<button type="button" class="mb-1 btn btn-icon facebook btn-rounded-circle">
  <i class="mdi mdi-facebook"></i>
</button>

<button type="button" class="mb-1 btn btn-icon twitter btn-rounded-circle">
  <i class="mdi mdi-twitter"></i>
</button>

<button type="button" class="mb-1 btn btn-icon google-plus btn-rounded-circle">
  <i class="mdi mdi-google-plus"></i>
</button>

<button type="button" class="mb-1 btn btn-icon linkedin btn-rounded-circle">
  <i class="mdi mdi-linkedin"></i>
</button>

<button type="button" class="mb-1 btn btn-icon pinterest btn-rounded-circle">
  <i class="mdi mdi-pinterest"></i>
</button>

<button type="button" class="mb-1 btn btn-icon tumblr btn-rounded-circle">
  <i class="mdi mdi-tumblr"></i>
</button>

<button type="button" class="mb-1 btn btn-icon vimeo btn-rounded-circle">
  <i class="mdi mdi-vimeo"></i>
</button>

<button type="button" class="mb-1 btn btn-icon dropbox btn-rounded-circle">
  <i class="mdi mdi-dropbox"></i>
</button>

<button type="button" class="mb-1 btn btn-icon dribbble btn-rounded-circle">
  <i class="mdi mdi-dribbble"></i>
</button>

<button type="button" class="mb-1 btn btn-icon skype btn-rounded-circle">
  <i class="mdi mdi-skype"></i>
</button>

Outline Social Buttons


<button type="button" class="mb-1 btn btn-icon btn-outline facebook">
  <i class="mdi mdi-facebook"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline twitter">
  <i class="mdi mdi-twitter"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline google-plus">
  <i class="mdi mdi-google-plus"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline linkedin">
  <i class="mdi mdi-linkedin"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline pinterest">
  <i class="mdi mdi-pinterest"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline tumblr">
  <i class="mdi mdi-tumblr"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline vimeo">
  <i class="mdi mdi-vimeo"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline dropbox">
  <i class="mdi mdi-dropbox"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline dribbble">
  <i class="mdi mdi-dribbble"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline skype">
  <i class="mdi mdi-skype"></i>
</button>

Outline Social Buttons with Icon & Text


<button type="button" class="mb-1 btn btn-outline facebook">
  <i class="mdi mdi-facebook"></i>
  facebook
</button>

<button type="button" class="mb-1 btn btn-outline twitter">
  <i class="mdi mdi-twitter"></i>
  twitter
</button>

<button type="button" class="mb-1 btn btn-outline google-plus">
  <i class="mdi mdi-google-plus"></i>
  google-plus
</button>

<button type="button" class="mb-1 btn btn-outline linkedin">
  <i class="mdi mdi-linkedin"></i>
  linkedin
</button>

<button type="button" class="mb-1 btn btn-outline pinterest">
  <i class="mdi mdi-pinterest"></i>
  pinterest
</button>

<button type="button" class="mb-1 btn btn-outline tumblr">
  <i class="mdi mdi-tumblr"></i>
  tumblr
</button>

<button type="button" class="mb-1 btn btn-outline vimeo">
  <i class="mdi mdi-vimeo"></i>
  vimeo
</button>

<button type="button" class="mb-1 btn btn-outline dropbox">
  <i class="mdi mdi-dropbox"></i>
  dropbox
</button>

<button type="button" class="mb-1 btn btn-outline dribbble">
  <i class="mdi mdi-dribbble"></i>
  dribbble
</button>

<button type="button" class="mb-1 btn btn-outline skype">
  <i class="mdi mdi-skype"></i>
  skype
</button>

Outline Social Buttons with Text


<button type="button" class="mb-1 btn btn-outline facebook">
  facebook
</button>

<button type="button" class="mb-1 btn btn-outline twitter">
  twitter
</button>

<button type="button" class="mb-1 btn btn-outline google-plus">
  google-plus
</button>

<button type="button" class="mb-1 btn btn-outline linkedin">
  linkedin
</button>

<button type="button" class="mb-1 btn btn-outline pinterest">
  pinterest
</button>

<button type="button" class="mb-1 btn btn-outline tumblr">
  tumblr
</button>

<button type="button" class="mb-1 btn btn-outline vimeo">
  vimeo
</button>

<button type="button" class="mb-1 btn btn-outline dropbox">
  dropbox
</button>

<button type="button" class="mb-1 btn btn-outline dribbble">
  dribbble
</button>
<button type="button" class="mb-1 btn btn-outline skype">
  skype
</button>

Outline Social Circle Buttons


<button type="button" class="mb-1 btn btn-icon btn-outline facebook btn-rounded-circle">
  <i class="mdi mdi-facebook"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline twitter btn-rounded-circle">
  <i class="mdi mdi-twitter"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline google-plus btn-rounded-circle">
  <i class="mdi mdi-google-plus"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline linkedin btn-rounded-circle">
  <i class="mdi mdi-linkedin"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline pinterest btn-rounded-circle">
  <i class="mdi mdi-pinterest"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline tumblr btn-rounded-circle">
  <i class="mdi mdi-tumblr"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline vimeo btn-rounded-circle">
  <i class="mdi mdi-vimeo"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline dropbox btn-rounded-circle">
  <i class="mdi mdi-dropbox"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline dribbble btn-rounded-circle">
  <i class="mdi mdi-dribbble"></i>
</button>

<button type="button" class="mb-1 btn btn-icon btn-outline skype btn-rounded-circle">
  <i class="mdi mdi-skype"></i>
</button>