HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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"><!-- Standard button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Provides extra visual weight and identifies the primary action in a set of buttons --></span>
<span class="nt"><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">></span>Primary<span class="nt"></button></span>
<span class="c"><!-- Indicates a successful or positive action --></span>
<span class="nt"><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">></span>Success<span class="nt"></button></span>
<span class="c"><!-- Contextual button for informational alert messages --></span>
<span class="nt"><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">></span>Info<span class="nt"></button></span>
<span class="c"><!-- Indicates caution should be taken with this action --></span>
<span class="nt"><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">></span>Warning<span class="nt"></button></span>
<span class="c"><!-- Indicates a dangerous or potentially negative action --></span>
<span class="nt"><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">></span>Danger<span class="nt"></button></span>
<span class="c"><!-- Deemphasize a button by making it look like a link while maintaining button behavior --></span>
<span class="nt"><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">></span>Link<span class="nt"></button></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"><!-- Default button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Raised button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Flat button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle button (FAB) --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Raised button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Flat button --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></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"><!-- Default button with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Raised button with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Flat button with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle button (FAB) with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Raised button with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></span>
<span class="c"><!-- Circle + Flat button with ripple effect --></span>
<span class="nt"><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">></span>Default<span class="nt"></button></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"><p></span>
<span class="nt"><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">></span>Large button<span class="nt"></button></span>
<span class="nt"><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">></span>Large button<span class="nt"></button></span>
<span class="nt"><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">></span>Large button<span class="nt"></button></span>
<span class="nt"><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">></span>Large button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><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">></span>Default button<span class="nt"></button></span>
<span class="nt"><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">></span>Default button<span class="nt"></button></span>
<span class="nt"><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">></span>Default button<span class="nt"></button></span>
<span class="nt"><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">></span>Default button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><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">></span>Small button<span class="nt"></button></span>
<span class="nt"><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">></span>Small button<span class="nt"></button></span>
<span class="nt"><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">></span>Small button<span class="nt"></button></span>
<span class="nt"><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">></span>Small button<span class="nt"></button></span>
<span class="nt"></p></span>
<span class="nt"><p></span>
<span class="nt"><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">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><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">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><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">></span>Extra small button<span class="nt"></button></span>
<span class="nt"><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">></span>Extra small button<span class="nt"></button></span>
<span class="nt"></p></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"><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">></span>Block level button<span class="nt"></button></span>
<span class="nt"><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">></span>Block level button<span class="nt"></button></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 & 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"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>Left<span class="nt"></button></span>
<span class="nt"><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">></span>Middle<span class="nt"></button></span>
<span class="nt"><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">></span>Right<span class="nt"></button></span>
<span class="nt"></div></span></code></pre></div>
<h3 id="btn-groups-toolbar">Button toolbar</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></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"><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">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"></div></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"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-lg"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-sm"</span><span class="nt">></span>...<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-xs"</span><span class="nt">></span>...<span class="nt"></div></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"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>1<span class="nt"></button></span>
<span class="nt"><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">></span>2<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>
Dropdown
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"caret"</span><span class="nt">></span></span>
<span class="nt"></button></span>
<span class="nt"><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">></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></li></span>
<span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></li></span>
<span class="nt"></ul></span>
<span class="nt"></div></span>
<span class="nt"></div></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"><div</span> <span class="na">class=</span><span class="s">"btn-group-vertical"</span><span class="nt">></span>
...
<span class="nt"></div></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><a></code> or <code><button></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><a></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"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
...
<span class="nt"></div></span></code></pre></div>
<h4>With <code><button></code> elements</h4>
<p>To use justified button groups with <code><button></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><button></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"><div</span> <span class="na">class=</span><span class="s">"btn-group btn-group-justified"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>Left<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>Middle<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span><span class="nt">></span>
<span class="nt"><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">></span>Right<span class="nt"></button></span>
<span class="nt"></div></span>
<span class="nt"></div></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);
Also see: Tab Triggers