Bootstrap Material Design - Buttons

Bootstrap-Material-Design---Buttons.markdown

Bootstrap Material Design - Buttons

Based on: Material Design by Google (http://www.google.com/design/)

A Pen by Sergey Kupletsky on CodePen.

License.

index.html

<div class="container">
<div class="bs-docs-section">
  <h1 id="buttons" class="page-header">Material Buttons</h1>

<h2 id="buttons-options">Options</h2>
  <p>Use any of the available button classes to quickly create a styled button.</p>
  <div class="bs-example">
  <p>
    <div class="type-info">Default buttons</div>
    <button type="button" class="btn btn-default">Default</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-link">Link</button>
  </p>
  </div>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Standard button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Provides extra visual weight and identifies the primary action in a set of buttons --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Indicates a successful or positive action --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Contextual button for informational alert messages --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Indicates caution should be taken with this action --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Indicates a dangerous or potentially negative action --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Deemphasize a button by making it look like a link while maintaining button behavior --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/button&gt;</span></code></pre></div>


<!-- Types -->
<h2 id="buttons-types">Types</h2>
  <p>Use any of the available button classes to create a button. Also you can mix types.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div>
  <div class="bs-example bs-example-type">
  <table class="table">
      <tbody>
        <tr>
          <td>
		  	<button type="button" class="btn btn-default">Default</button>
			<button type="button" class="btn btn-primary">Primary</button>
    		<button type="button" class="btn btn-info">Info</button>
			<button type="button" class="btn btn-success">Success</button>
			<button type="button" class="btn btn-link">Link</button>
		  </td>
          <td class="type-info">Default buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-raised btn-default">Default</button>
			<button type="button" class="btn btn-raised btn-primary">Primary</button>
    		<button type="button" class="btn btn-raised btn-info">Info</button>
			<button type="button" class="btn btn-raised btn-success">Success</button>
			<button type="button" class="btn btn-raised btn-link">Link</button>
		  </td>
          <td class="type-info">Raised buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-flat btn-default">Default</button>
			<button type="button" class="btn btn-flat btn-primary">Primary</button>
    		<button type="button" class="btn btn-flat btn-info">Info</button>
			<button type="button" class="btn btn-flat btn-success">Success</button>
			<button type="button" class="btn btn-flat btn-link">Link</button>
		  </td>
          <td class="type-info">Flat buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-circle btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle btn-link">Link</button>
		  </td>
          <td class="type-info">Circle buttons (FAB)</td>
        </tr>
		<tr>
          <td>
		  	<button type="button" class="btn btn-circle btn-raised btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle btn-raised btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle btn-raised btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle btn-raised btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle btn-raised btn-link">Link</button>
		  </td>
          <td class="type-info">Circle + Raised buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-circle btn-flat btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle btn-flat btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle btn-flat btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle btn-flat btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle btn-flat btn-link">Link</button>
		  </td>
          <td class="type-info">Circle + Flat buttons</td>
        </tr>
      </tbody>
    </table>
  	</div>
<div class="highlight"><pre><code class="html">
<span class="c">&lt;!-- Default button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Raised button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Flat button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle button (FAB) --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle + Raised button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle + Flat button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

</code></pre></div>


<!-- Ripple effect -->
<h2 id="buttons-options">Ripple effect</h2>
  <p>Ripple effect requiers JS for creating DOM-element and controlling animation. Animation work on CSS3. If you want to use this effect, you should add class <code>.ripple-effect</code> to your button.</p>
  <div class="bs-example bs-example-type">
  <table class="table">
      <tbody>
        <tr>
          <td>
		  	<button type="button" class="btn ripple-effect btn-default">Default</button>
			<button type="button" class="btn ripple-effect btn-primary">Primary</button>
    		<button type="button" class="btn ripple-effect btn-info">Info</button>
			<button type="button" class="btn ripple-effect btn-success">Success</button>
			<button type="button" class="btn ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Default buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-raised ripple-effect btn-default">Default</button>
			<button type="button" class="btn btn-raised ripple-effect btn-primary">Primary</button>
    		<button type="button" class="btn btn-raised ripple-effect btn-info">Info</button>
			<button type="button" class="btn btn-raised ripple-effect btn-success">Success</button>
			<button type="button" class="btn btn-raised ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Raised buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-flat ripple-effect btn-default">Default</button>
			<button type="button" class="btn btn-flat ripple-effect btn-primary">Primary</button>
    		<button type="button" class="btn btn-flat ripple-effect btn-info">Info</button>
			<button type="button" class="btn btn-flat ripple-effect btn-success">Success</button>
			<button type="button" class="btn btn-flat ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Flat buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-circle ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Circle buttons (FAB)</td>
        </tr>
		<tr>
          <td>
		  	<button type="button" class="btn btn-circle btn-raised ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle btn-raised ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle btn-raised ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle btn-raised ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Circle + Raised buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-circle btn-flat ripple-effect btn-default"><span class="glyphicon glyphicon-star-empty"></span></button>
			<button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
    		<button type="button" class="btn btn-circle btn-flat ripple-effect btn-info"><span class="glyphicon glyphicon-exclamation-sign"></span></button>
			<button type="button" class="btn btn-circle btn-flat ripple-effect btn-success"><span class="glyphicon glyphicon-ok"></span></button>
			<button type="button" class="btn btn-circle btn-flat ripple-effect btn-link">Link</button>
		  </td>
          <td class="type-info">Circle + Flat buttons</td>
        </tr>
      </tbody>
    </table>
  	</div>

<div class="highlight"><pre><code class="html">
<span class="c">&lt;!-- Default button with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Raised button with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Flat button with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle button (FAB) with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle + Raised button with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Circle + Flat button with ripple effect --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

</code></pre></div>


  <h2 id="buttons-sizes">Sizes</h2>
  <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
  <div class="bs-example bs-example-type">
  <table class="table">
      <tbody>
        <tr>
          <td>
    		<button type="button" class="btn btn-lg btn-raised ripple-effect btn-primary">Raised</button>
			<button type="button" class="btn btn-lg btn-flat ripple-effect btn-primary">Flat</button>
			<button type="button" class="btn btn-lg btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
			<button type="button" class="btn btn-lg btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
		  </td>
          <td class="type-info">Large buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-raised ripple-effect btn-primary">Raised</button>
			<button type="button" class="btn btn-flat ripple-effect btn-primary">Flat</button>
			<button type="button" class="btn btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
			<button type="button" class="btn btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
		  </td>
          <td class="type-info">Default buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-sm btn-raised ripple-effect btn-primary">Raised</button>
			<button type="button" class="btn btn-sm btn-flat ripple-effect btn-primary">Flat</button>
			<button type="button" class="btn btn-sm btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
			<button type="button" class="btn btn-sm btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
		  </td>
          <td class="type-info">Small buttons</td>
        </tr>
        <tr>
          <td>
		  	<button type="button" class="btn btn-xs btn-raised ripple-effect btn-primary">Raised</button>
			<button type="button" class="btn btn-xs btn-flat ripple-effect btn-primary">Flat</button>
			<button type="button" class="btn btn-xs btn-circle btn-raised ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
			<button type="button" class="btn btn-xs btn-circle btn-flat ripple-effect btn-primary"><span class="glyphicon glyphicon-star"></span></button>
		  </td>
          <td class="type-info">Extra small buttons</td>
        </tr>
      </tbody>
    </table>
  	</div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary"</span><span class="nt">&gt;</span>Default button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary"</span><span class="nt">&gt;</span>Default button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary"</span><span class="nt">&gt;</span>Default button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary"</span><span class="nt">&gt;</span>Default button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;p&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised ripple-effect btn-primary btn-xs"</span><span class="nt">&gt;</span>Extra small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat ripple-effect btn-primary btn-xs"</span><span class="nt">&gt;</span>Extra small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-raised ripple-effect btn-primary btn-xs"</span><span class="nt">&gt;</span>Extra small button<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-circle btn-flat ripple-effect btn-primary btn-xs"</span><span class="nt">&gt;</span>Extra small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span></code></pre></div>

  <p>Create block level buttons—those that span the full width of a parent— by adding <code>.btn-block</code>.</p>
  <div class="bs-example">
    <div class="well" style="max-width: 400px; margin: 0 auto 10px;">
      <button type="button" class="btn btn-raised btn-primary btn-block ripple-effect">Block level button</button>
      <button type="button" class="btn btn-flat btn-primary btn-block ripple-effect">Block level button</button>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-raised btn-primary btn-block ripple-effect"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flat btn-primary btn-block ripple-effect"</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span></code></pre></div>
</div>

<div class="bs-docs-section">
  <h1 id="btn-groups" class="page-header">Button groups</h1>

  <p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="../javascript/#buttons">our buttons plugin</a>.</p>

  <div class="bs-callout bs-callout-warning">
    <h4>Tooltips &amp; popovers in button groups require special setting</h4>
    <p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
  </div>

  <h3 id="btn-groups-single">Basic example</h3>
  <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-group" style="margin: 9px 0 5px;">
      <button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
      <button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
      <button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Left<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Middle<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Right<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h3 id="btn-groups-toolbar">Button toolbar</h3>
  <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-toolbar" role="toolbar" style="margin: 0;">
      <div class="btn-group">
        <button type="button" class="btn btn-flat ripple-effect btn-default">1</button>
        <button type="button" class="btn btn-flat ripple-effect btn-info">2</button>
        <button type="button" class="btn btn-flat ripple-effect btn-warning">3</button>
      </div>
      <div class="btn-group">
	  	<button type="button" class="btn btn-raised ripple-effect btn-default">4</button>
        <button type="button" class="btn btn-raised ripple-effect btn-info">5</button>
        <button type="button" class="btn btn-raised ripple-effect btn-warning">6</button>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-toolbar"</span> <span class="na">role=</span><span class="s">"toolbar"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h3 id="btn-groups-sizing">Sizing</h3>
  <p>Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
      </div>
    </div>
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">
        <button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
      </div>
    </div>
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
      </div>
    </div>
    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-flat ripple-effect btn-default">Left</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Middle</button>
        <button type="button" class="btn btn-flat ripple-effect btn-default">Right</button>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h3 id="btn-groups-nested">Nesting</h3>
  <p>Place a <code>.btn-group</code> within another <code>.btn-group</code> when you want dropdown menus mixed with a series of buttons.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>

      <div class="btn-group">
        <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>1<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>2<span class="nt">&lt;/button&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
      Dropdown
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">&gt;&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
      <span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Dropdown link<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h3 id="btn-groups-vertical">Vertical variation</h3>
  <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group">
        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h3 id="btn-groups-justified">Justified button groups</h3>
  <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p>

  <div class="bs-callout bs-callout-warning">
    <h4>Handling borders</h4>
    <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p>
  </div>
  <div class="bs-callout bs-callout-warning">
    <h4>IE8 and borders</h4>
    <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
    <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
  </div>

  <h4>With <code>&lt;a&gt;</code> elements</h4>
  <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-group btn-group-justified">
      <a class="btn btn-default" role="button">Left</a>
      <a class="btn btn-default" role="button">Middle</a>
      <a class="btn btn-default" role="button">Right</a>
    </div>
    <br>
    <div class="btn-group btn-group-justified">
      <a class="btn btn-default" role="button">Left</a>
      <a class="btn btn-default" role="button">Middle</a>
      <div class="btn-group">
        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/div&gt;</span></code></pre></div>

  <h4>With <code>&lt;button&gt;</code> elements</h4>
  <p>To use justified button groups with <code>&lt;button&gt;</code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code>&lt;button&gt;</code> elements, but since we support button dropdowns, we can workaround that.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <div class="btn-group btn-group-justified">
      <div class="btn-group">
        <button type="button" class="btn btn-default">Left</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default">Middle</button>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
      </div>
    </div>
  </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Left<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Middle<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Right<span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</div>


</div>

script.js

// Ripple-effect animation
(function($) {
    $(".ripple-effect").click(function(e){
        var rippler = $(this);

        // create .ink element if it doesn't exist
        if(rippler.find(".ink").length == 0) {
            rippler.append("<span class='ink'></span>");
        }

        var ink = rippler.find(".ink");

        // prevent quick double clicks
        ink.removeClass("animate");

        // set .ink diametr
        if(!ink.height() && !ink.width())
        {
            var d = Math.max(rippler.outerWidth(), rippler.outerHeight());
            ink.css({height: d, width: d});
        }

        // get click coordinates
        var x = e.pageX - rippler.offset().left - ink.width()/2;
        var y = e.pageY - rippler.offset().top - ink.height()/2;

        // set .ink position and add class .animate
        ink.css({
          top: y+'px',
          left:x+'px'
        }).addClass("animate");
    })
})(jQuery);

style.less

/* -- import Bootstrap v3 ----------------------------- */
@import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
/* -- import Bootstrap docs ---------------------------- */
@import "//getbootstrap.com/assets/css/docs.min.css";

/* -- import Roboto Font ------------------------------ */
@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";

/*-- Body style ---------------------------------- */
body {
  font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #212121;
  
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -- Main style ------------------------------------ */
.btn {
  font-family: "Roboto", 'Helvetica Neue, Helvetica, Arial', sans-serif; 
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.87);
}

.btn-default, .btn-link {
  color: rgba(0, 0, 0, 0.87);
}


/* -- Buttons style ------------------------------------ */
.btn {
  outline: 0;
  outline-offset: 0;
  border: 0;
  border-radius: 2px;

  transition: all .15s ease-in-out; 
  -o-transition: all .15s ease-in-out; 
  -moz-transition: all .15s ease-in-out; 
  -webkit-transition: all .15s ease-in-out;  
  
  &:focus, &:active, &.active, &:active:focus, &.active:focus {
    outline: 0;
    outline-offset: 0;  
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
  }
}


/* -- Buttons types -------------------------------- */
.btn-raised {
  // shadow depth 1
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12),
  0 1px 2px 0 rgba(0, 0, 0, .24);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12),
  0 1px 2px 0 rgba(0, 0, 0, .24); 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12),
  0 1px 2px 0 rgba(0, 0, 0, .24); 
   
  &:active, &.active, &:active:focus, &.active:focus {
    // shadow depth 2
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23); 
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23); 
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23);
  }
  
  &:focus {
    // shadow depth 2
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23); 
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23); 
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16),
  0 3px 6px rgba(0, 0, 0, .23);
  }
  
}

.btn-flat { 
  
}

.btn.btn-circle {
  padding: 0;
  border-radius: 50%;
}

/* -- Buttons colors -------------------------------- */
//## Button template
.btn-temlate (@color500; @color600; @color700; @color800; @color900) {
  background-color: @color500; // Color 500
  
  &:hover {
    background-color: @color600; // Color 600
  }
  
  &:active, &.active {
    background-color: @color600; // Color 600
  }
  
  &:focus {
    background-color: @color700; // Color 700
  }
  
  &:disabled, &.disabled, &[disabled] {
    background-color: darken(#ccc, 10%);
  }
  
  //## color for riple-effect
  .ink {
    background-color: @color800; // Color 800
  }
}
.btn-flat-temlate (@color500; @color600; @color700; @color800; @color900) {
  color: @color500; // Color 500
  background-color: transparent;
  
  &:hover {
    color: @color600; // Color 600
    background-color: lighten(#999, 30%);
  }
  
  &:active, &.active {
    color: @color700; // Color 700
    background-color: lighten(#999, 20%);
  }
  
  &:focus {
    color: @color800; // Color 800
    background-color: lighten(#999, 20%);
  } 
  
  //## color for riple-effect
  .ink {
    background-color: darken(#ccc, 30%);
  }
}

//## Default // color: white
.btn-default, .dropdown-toggle.btn-default {
  .btn-temlate(#fff; lighten(#999, 30%); lighten(#999, 20%); lighten(#999, 12%); lighten(#999, 20%);) 
}
.btn-flat.btn-default {
  .btn-flat-temlate(#212121; darken(#212121, 5%); darken(#212121, 12%); #000; #000;) 
}

//## Primary // color: blue
.btn-primary, .dropdown-toggle.btn-primary {
  .btn-temlate(#5677fc; #4e6cef; #455ede; #3b50ce; #2a36b1;) 
}
.btn-flat.btn-primary {
  .btn-flat-temlate(#5677fc; #4e6cef; #455ede; #3b50ce; #2a36b1;) 
}

//## Success // color: green
.btn-success, .dropdown-toggle.btn-success {
  .btn-temlate(#259b24; #0a8f08; #0a7e07; #056f00; #0d5302;)   
}
.btn-flat.btn-success {
  .btn-flat-temlate(#259b24; #0a8f08; #0a7e07; #056f00; #0d5302;) 
}

//## Info // color: light blue
.btn-info, .dropdown-toggle.btn-info {
  .btn-temlate(#03a9f4; #039be5; #0288d1; #0277bd; #01579b;)   
}
.btn-flat.btn-info {
  .btn-flat-temlate(#03a9f4; #039be5; #0288d1; #0277bd; #01579b;) 
}

//## Warning // color: amber
.btn-warning, .dropdown-toggle.btn-warning {
  .btn-temlate(#ffc107; #ffb300; #ffa000; #ff8f00; #ff6f00;)   
}
.btn-flat.btn-warning {
  .btn-flat-temlate(#ffc107; #ffb300; #ffa000; #ff8f00; #ff6f00;)   
}

//## Danger // color: deep orange
.btn-danger, .dropdown-toggle.btn-danger {
  .btn-temlate(#ff5722; #f4511e; #e64a19; #d84315; #bf360c;)   
}
.btn-flat.btn-danger {
  .btn-flat-temlate(#ff5722; #f4511e; #e64a19; #d84315; #bf360c;)  
}

/* -- Buttons sizes -------------------------------- */
.btn {
  min-width: 88px;
  padding: 10px 14px;
}

.btn-lg, .btn-group-lg>.btn {
  min-width: 122px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3; 
}

.btn-sm, .btn-group-sm>.btn {
  min-width: 64px;
  padding: 4px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.btn-xs, .btn-group-xs>.btn {
  min-width: 46px;
  padding: 2px 10px;
  font-size: 10px;
  line-height: 1.5;
}

.btn-circle {
  width: 56px;
  height: 56px;
  min-width: 56px;
  
  span {
    line-height: 56px;
  }
}

.btn-circle.btn-lg {
  width: 78px;
  height: 78px;
  min-width: 78px;
  
  span {
    line-height: 78px;
  }
}

.btn-circle.btn-sm {
  width: 40px;
  height: 40px;
  min-width: 40px;
  
  span {
    line-height: 40px;
  }
}

.btn-circle.btn-xs {
  width: 30px;
  height: 30px; 
  min-width: 30px;
  
  span {
    line-height: 30px;
  }
}


/*-- Button groups --------------------------------- */
.btn-group .btn {
  border-radius: 2px;
}

.btn-group.open .dropdown-toggle {
  outline: 0;
  outline-offset: 0;  
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
  margin-left: 0;
}

.btn-group>.btn:hover, .btn-group-vertical>.btn:hover {
  z-index: 0;
}
 .btn-group>.btn:focus:hover, .btn-group-vertical>.btn:focus:hover, .btn-group>.btn:active:hover, .btn-group-vertical>.btn:active:hover, .btn-group>.btn.active:hover, .btn-group-vertical>.btn.active:hover {
  z-index: 2;
}



/* -- Ripple effect -------------------------------- */
.ripple-effect {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0,0,0);
}
.ink {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);

  background: #fff;
  opacity: 1;
}

// animation effect
.ink.animate {
  -webkit-animation: ripple .5s linear;
  -moz-animation: ripple .5s linear;
  -ms-animation: ripple .5s linear;
  -o-animation: ripple .5s linear;
  animation: ripple .5s linear;
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-moz-keyframes ripple {
  100% {
    opacity: 0;
    -moz-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-ms-keyframes ripple {
  100% {
    opacity: 0;
    -ms-transform: scale(2.5);
    transform: scale(2.5);
  }
}
@-o-keyframes ripple {
  100% {
    opacity: 0;
    -o-transform: scale(2.5);
    transform: scale(2.5);
  }
}