sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
611 lines (606 loc) • 34.2 kB
HTML
---
layout: default
title: "Button Social - Sleek Admin Dashboard Template"
parent: "components"
sub_parent: "components"
activePage: "button-social"
plugins: []
---
<div class="breadcrumb-wrapper">
<h1>Button Social</h1>
{% include breadcrumb.htm %}
</div>
<ul class="nav nav-tabs nav-style-border mb-5" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#rounded" role="tab" aria-controls="rounded" aria-selected="true">Rounded Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#square" role="tab" aria-controls="square" aria-selected="false">Square Buttons</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#pill" role="tab" aria-controls="pill" aria-selected="false">Pill Buttons</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="card card-default">
<div class="card-body">
<p>To use a social button you have to add any of these classes: <code>.btn-facebook, .btn-twitter, .btn-google-plus, .btn-linkedin, .btn-pinterest, .btn-tumblr, .btn-dropbox</code> with <code>.btn</code>.</p>
</div>
</div>
<!-- Rounded Button -->
<div class="tab-pane fade show active" id="rounded" role="tabpanel" aria-labelledby="home-tab">
<!-- First Row -->
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For social button for example <code> .btn .btn-facebook </code>. </p>
<button type="button" class="mb-1 btn btn-facebook">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-twitter">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-google-plus">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-linkedin">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-pinterest">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-tumblr">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-vimeo">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-dropbox">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For social outline button for example <code> .btn .btn-outline .btn-facebook </code>. </p>
<button type="button" class="mb-1 btn btn-outline btn-facebook">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-twitter">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-google-plus">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-linkedin">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-pinterest">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-tumblr">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-vimeo">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-dropbox">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social text Large Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-lg text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Social text Large Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-lg text"> Dropbox </button>
</div>
</div>
</div>
</div>
</div>
<!-- /.Rounded Button -->
<!-- Square Button -->
<div class="tab-pane fade " id="square" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For square social button for example <code> .btn .btn-facebook .btn-square </code>. </p>
<button type="button" class="mb-1 btn btn-facebook btn-square">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-twitter btn-square">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-google-plus btn-square">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-linkedin btn-square">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-pinterest btn-square">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-tumblr btn-square">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-vimeo btn-square">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-dropbox btn-square">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Outline Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For square social outline button for example <code> .btn btn-outline .btn-facebook .btn-square </code>. </p>
<button type="button" class="mb-1 btn btn-outline btn-facebook btn-square">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-twitter btn-square">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-google-plus btn-square">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-linkedin btn-square">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-pinterest btn-square">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-tumblr btn-square">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-vimeo btn-square">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-dropbox btn-square">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-square text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-square text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-square text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-square text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-square text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-square text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-square text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-square text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Outline Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-square text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-square text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-square text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-square text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-square text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-square text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-square text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-square text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Outline text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-square btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-square btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-square btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-square btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-square btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-square btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-square btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-square btn-lg text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Square Social Outline text Large Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-square btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-square btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-square btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-square btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-square btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-square btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-square btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-square btn-lg text"> Dropbox </button>
</div>
</div>
</div>
</div>
</div>
<!-- /.Rounded Button -->
<!-- Pill Button -->
<div class="tab-pane fade" id="pill" role="tabpanel" aria-labelledby="contact-tab">
<div class="row">
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For pill social button for example <code> .btn .btn-facebook .rounded-circle </code>. </p>
<button type="button" class="mb-1 btn btn-facebook rounded-circle">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-twitter rounded-circle">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-google-plus rounded-circle">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-linkedin rounded-circle">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-pinterest rounded-circle">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-tumblr rounded-circle">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-vimeo rounded-circle">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-dropbox rounded-circle">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Buttons</h2>
</div>
<div class="card-body">
<p class="mb-5"> For pill social button for example <code> .btn btn-outline .btn-facebook .rounded-circle </code>. </p>
<button type="button" class="mb-1 btn btn-outline btn-facebook rounded-circle">
<i class="mdi mdi-facebook"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-twitter rounded-circle">
<i class="mdi mdi-twitter"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-google-plus rounded-circle">
<i class="mdi mdi-google-plus"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-linkedin rounded-circle">
<i class="mdi mdi-linkedin"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-pinterest rounded-circle">
<i class="mdi mdi-pinterest"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-tumblr rounded-circle">
<i class="mdi mdi-tumblr"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-vimeo rounded-circle">
<i class="mdi mdi-vimeo"></i>
</button>
<button type="button" class="mb-1 btn btn-outline btn-dropbox rounded-circle">
<i class="mdi mdi-dropbox"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-pill text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-pill text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-pill text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-pill text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-pill text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-pill text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-pill text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-pill text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Buttons with text</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill text">
<i class="mdi mdi-facebook"></i>Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill text">
<i class="mdi mdi-twitter"></i>Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill text">
<i class="mdi mdi-google-plus"></i>Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill text">
<i class="mdi mdi-linkedin"></i> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill text">
<i class="mdi mdi-pinterest"></i>Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill text">
<i class="mdi mdi-tumblr"></i>Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill text">
<i class="mdi mdi-vimeo"></i>Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill text">
<i class="mdi mdi-dropbox"></i>Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-pill text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-pill text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-pill text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-pill text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-pill text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-pill text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-pill text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-pill text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h2>Pill Social Text Buttons</h2>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h4>Social Text Large Buttons</h4>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-pill btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-pill btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-pill btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-pill btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-pill btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-pill btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-pill btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-pill btn-lg text"> Dropbox </button>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card card-default">
<div class="card-header card-header-border-bottom">
<h4>Social Text Large Buttons</h4>
</div>
<div class="card-body">
<button type="button" class="mb-1 btn btn-facebook btn-outline btn-pill btn-lg text"> Facebook </button>
<button type="button" class="mb-1 btn btn-twitter btn-outline btn-pill btn-lg text"> Twitter </button>
<button type="button" class="mb-1 btn btn-google-plus btn-outline btn-pill btn-lg text"> Google+ </button>
<button type="button" class="mb-1 btn btn-linkedin btn-outline btn-pill btn-lg text"> Linkedin </button>
<button type="button" class="mb-1 btn btn-pinterest btn-outline btn-pill btn-lg text"> Pinterest </button>
<button type="button" class="mb-1 btn btn-tumblr btn-outline btn-pill btn-lg text"> Tumblr </button>
<button type="button" class="mb-1 btn btn-vimeo btn-outline btn-pill btn-lg text"> Vimeo </button>
<button type="button" class="mb-1 btn btn-dropbox btn-outline btn-pill btn-lg text"> Dropbox </button>
</div>
</div>
</div>
</div>
</div>
</div>