css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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>
            
          
!
            
              /* -- 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);
  }
}
            
          
!
            
              // 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);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console