Bootstrap Button Generator

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="fb:admins" content="19908503" /> <meta property="fb:app_id" content="112989545392380" /> <meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" /> <meta property="og:type" content="website" /> <meta property="twitter:account_id" content="786331568" /> <meta itemprop="name" content="Bootsnipp"> <meta itemprop="description" content="Free HTML snippets for Bootstrap HTML CSS JS"> <meta property="og:url" content="https://bootsnipp.com" /> <meta property="og:image" content="https://bootsnipp.com/img/logo.jpg" /> <meta property="og:site_name" content="Bootsnipp.com" /> <meta name="description" content="Create bootstrap buttons with custome text, colors, sizes, and even icons included in the button."> <meta name="keywords" content="bootstrap, css, html, javascript, jquery, button, generator, builder, design"> <title>Bootstrap Button Generator</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <link rel="shortcut icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="icon" href="//d2d3qesrx8xj6s.cloudfront.net/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="//d2d3qesrx8xj6s.cloudfront.net/apple-touch-icon-144x144-precomposed.png"> <link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="https://bootsnipp.com/feed.rss" /> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">  <link rel="stylesheet" href="/dist/bootsnipp.min.css"> <style type="text/css"> .bs-glyphicons { list-style: none; } .bs-glyphicons li { float: left; line-height: 20px; } </style>   <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-55581850-1', 'auto', {'allowLinker': true}); ga('require', 'linker'); ga('linker:autoLink', ['danstools.com','unixtimestamp.com','url-encode-decode.com','cssfontstack.com','hexcolortool.com','htaccessredirect.net','jspretty.com','jsmini.com','jsobfuscate.com','md5hashgenerator.com','regextester.com','cleancss.com','favicon-generator.org','website-performance.org','permissions-calculator.org','conversoes.org','convertissez.fr','convertitore.net','elconvertidor.com','files-conversion.com','henkan-muryo.com','konvertirung.org','konvertor.org','tahwil.net','zhuan-huan.com','bootsnipp.com'] ); ga('send', 'pageview'); window.onload = function() { /* $('body').append('<script type="text/javascript" src="https://srv.buysellads.com/ads/CVADLKQJ.json?callback=drop_ad" async><\/script>'); $('body').append("<style>.bsa-apiads {\ line-height: 1.5;\ display: inline-block;\ float: left;\ font-size: 12px;\ background-color: #5A8DB6;\ border: solid 1px #337799;\ box-shadow: inset 0 1px hsla(0, 0%, 100%, .1);\ box-sizing: border-box;\ background-image: url('http://www.danstools.com/devops/img/devoops_pattern_b10.png');\ margin: 1em 1em 0 2em;\ border-radius: 4px;\ text-align: center;\ padding: .25em;\ }\ \ .bsa-apiads a:before {\ margin-right: 4px;\ padding: 2px 6px;\ border-radius: 3px;\ background-color: #58B668;\ color: #fff;\ content: 'Ad';\ }\ \ .bsa-apiads a {\ color: #fff;\ }\ \ .bsa-apiads a:hover {\ color: inherit;\ }</style>");*/ setTimeout(function() { var ad = document.querySelector(".bsap_ac1f95c148ce6148393fd34e69a52240"); var promos = document.querySelectorAll(".j8c3v"); var isblock = 0; for (var i = 0; i < promos.length; i++) { var promo = promos[i]; if (isblock ==1 || (ad && ad.innerHTML.replace(/\s/g, "").length == 0)) { isblock = 1; // ad.style.cssText = 'display:block !important'; // promo.style.cssText = 'display:none !important'; promo.innerHTML = ''; promo.style.display= 'inline-block'; promo.style.visibility= 'visible'; promo.style.maxWidth= ''; } else if (promo) { promo.innerHTML = ''; // var promotwo = document.querySelector("#toppromo2"); promo.childNodes[0].childNodes[0].style.width= ''; } } }, 1000); }; </script> <script type="text/javascript"> var fb_param = {}; fb_param.pixel_id = '6007046190250'; fb_param.value = '0.00'; (function(){ var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; var ref = document.getElementsByTagName('script')[0]; ref.parentNode.insertBefore(fpw, ref); })(); </script> <noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript> </head> <body>  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>  <nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation" style="z-index: 9999999"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="animbrand"> <a class="navbar-brand animate" href="https://bootsnipp.com">Bootsnipp</a> </div> </div>   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav navbar-left"> <li> <a href="#" class="dropdown-toggle active" data-toggle="dropdown">Bootstrap <span class="caret"></span> <span style="font-size:.5em; position:absolute; top:3px; left:2px">For</span> </a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">CSS Frameworks</li> <li class="active"><a href="/" class="">Bootstrap</a></li> <li class=""><a href="/foundation" class="">Foundation</a></li> <li class=""><a href="/semanticui" class="">Semantic UI</a></li> <li class=""><a href="/materialize" class="">Materialize</a></li> <li class=""><a href="/purecss" class="">Pure</a></li> <li class=""><a href="/bulma" class="">Bulma</a></li> <li class="dropdown-header">References</li> <li class=""><a href="/cssref" class="">CSS Reference</a></li>  </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class=""> <form action="https://bootsnipp.com/search" method="GET" role="search"> <input style="width:100%;margin-top:10px;" type="text" class="input-sm form-control" name="q" placeholder="Search for snippets"> </form> </li>    <li> <a href="#" class="dropdown-toggle active" data-toggle="dropdown">Tools <span class="caret"></span></a> <ul class="dropdown-menu" role="menu">  <li class=""><a href="https://bootsnipp.com/forum/bootstrap" class="">Community</a></li> <li class=""><a href="https://bootsnipp.com/builder" class="">Page Builder <span class="pull-right glyphicon glyphicon-modal-window"></span></a></li> <li class=""><a href="https://bootsnipp.com/forms" class="">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li> <li class="active"><a href="https://bootsnipp.com/buttons" class="">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li> <li class="active"><a href="https://bootsnipp.com/iconsearch" class="">Icon Search <span class="pull-right glyphicon glyphicon-search"></span></a></li> <li class="dropdown-header">Dan's Tools</li> <li class=""><a href="http://www.cleancss.com/diff-compare-merge/" class="">Diff / Merge <span class="pull-right glyphicon glyphicon-transfer"></span></a></li> <li class=""><a href="http://www.hexcolortool.com/" class="">Color Picker <span class="pull-right glyphicon glyphicon-pencil"></span></a></li> <li class=""><a href="http://www.danstools.com/keyword-tool/" class="">Keyword Tool <span class="pull-right glyphicon glyphicon-list-alt"></span></a></li> <li class=""><a href="http://www.cssfontstack.com/Web-Fonts" class="">Web Fonts <span class="pull-right glyphicon glyphicon-font"></span></a></li> <li class=""><a href="http://www.htaccessredirect.net/" class="">.htaccess Generator <span class="pull-right glyphicon glyphicon-console"></span></a></li> <li class=""><a href="http://www.favicon-generator.org/" class="">Favicon Generator <span class="pull-right glyphicon glyphicon-picture"></span></a></li> <li class=""><a href="http://www.website-performance.org/" class="">Site Speed Test <span class="pull-right glyphicon glyphicon-dashboard"></span></a></li> </ul> </li> <li class="dropdown"> <a href="https://bootsnipp.com/snippets" class="dropdown-toggle " data-toggle="dropdown">Snippets <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class=""><a href="https://bootsnipp.com" class="">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li> <li class=""><a href="https://bootsnipp.com/tags" class="">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li> <li class="dropdown-header">By Bootstrap Version</li> <li><a href="https://bootsnipp.com/tags/4.1.1" class="">4.1.1</a></li> <li><a href="https://bootsnipp.com/tags/4.0.0" class="">4.0.0</a></li> <li><a href="https://bootsnipp.com/tags/3.3.0" class="">3.3.0</a></li> <li><a href="https://bootsnipp.com/tags/3.2.0" class="">3.2.0</a></li> <li><a href="https://bootsnipp.com/tags/3.1.0" class="">3.1.0</a></li> <li><a href="https://bootsnipp.com/tags/3.0.3" class="">3.0.3</a></li> <li><a href="https://bootsnipp.com/tags/3.0.1" class="">3.0.1</a></li> <li><a href="https://bootsnipp.com/tags/3.0.0" class="">3.0.0</a></li> <li><a href="https://bootsnipp.com/tags/2.3.2" class="">2.3.2</a></li> </ul> </li> <li class=""><a href="https://bootsnipp.com/register" class="">Register</a></li> <li id="nav-login-btn" class=""><a href="https://bootsnipp.com/login" class="">Login</a></li>  </ul> </div> </div>  </nav> <div class="col-md-12 col-lg-12"> <div class="container" style="margin-bottom:20px; margin-top:20px;max-width:1200px;"> <div class="row"> <div class="col-md-8 col-lg-9"> <center>  <div id="ezoic-pub-ad-placeholder-101"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8815422507798180" data-ad-slot="5700240528" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </center> </div>  </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-4"> <h2>Bootstrap Button Generator <br><small>love it? Share: <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://bootsnipp.com/buttons" data-text="#twbootstrap visual button builder on https://bootsnipp.com" data-via="BootSnipp" data-related="twbootstrap" data-hashtags="twbootstrap">share</a></small></h2> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> <hr /> <div class="row"> <div class="col-md-4"> <p class="lead">Button text :</p> <p id="input"><input id="name" autocomplete="off" class="form-control" type="text" placeholder="My sexy button"></p> </div> <div class="col-md-4"> <p class="lead">Color :</p> <div id="types" class="btn-group"> <button name="color" type="button" class="btn btn-default" value="btn-default">Default</button> <button name="color" type="button" class="btn btn-primary" value="btn-primary">Primary</button> <button name="color" type="button" class="btn btn-info" value="btn-info">Info</button> <button name="color" type="button" class="btn btn-success" value="btn-success">Success</button> <button name="color" type="button" class="btn btn-warning" value="btn-warning">Warning</button> <button name="color" type="button" class="btn btn-danger" value="btn-danger">Danger</button> </div> </div> <div class="col-md-4"> <p class="lead">Size :</p> <div id="sizes"> <p> <button class="btn btn-xs btn-primary" value="btn-xs" type="button">Mini</button> <button class="btn btn-sm btn-primary" value="btn-sm" type="button">Small</button> <button class="btn btn-primary" value="btn-primary" type="button">Default</button> <button class="btn btn-primary btn-lg" value="btn-lg" type="button">Large</button> </p> <p><a href="#" class="btn btn-primary btn-block" data-toggle="button">Full width button</a></p> </div> </div> </div> <p class="lead">Icon:</p> <div class="row"> <div class="col-md-12"> <div id="icons"> <div class="row" style="margin-bottom: 10px;"> <div class="col-md-2"> Search icons: </div> <div class="col-md-4"> <input id="search" type="text" autocomplete="off" placeholder="Search icon" class="typeahead form-control"> </div> <div class="col-md-6"> Icon position: <div id="icon-position" class="btn-group"> <button class="btn btn-default" value="left" type="button"><span class="glyphicon glyphicon-arrow-left"></span> Left</button> <button class="btn btn-default" value="right" type="button">Right <span class="glyphicon glyphicon-arrow-right"></span></button> </div> </div> </div> <div class="row"> <div class="col-md-12"> <ul class="bs-glyphicons"> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-adjust"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-asterisk"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ban-circle"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-barcode"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-bell"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-book"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-bookmark"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-briefcase"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-bullhorn"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-calendar"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-camera"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-certificate"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-check"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-chevron-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-chevron-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-chevron-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-cloud"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-cloud-download"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-cloud-upload"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-cog"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-collapse-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-collapse-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-comment"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-compressed"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-copyright-mark"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-credit-card"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-cutlery"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-dashboard"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-download"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-download-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-earphone"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-eject"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-euro"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-exclamation-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-expand"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-export"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-eye-close"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-facetime-video"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-file"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-film"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-filter"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-fire"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-flag"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-flash"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-floppy-disk"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-floppy-open"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-floppy-remove"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-floppy-save"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-floppy-saved"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-folder-close"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-folder-open"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-forward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-fullscreen"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-gbp"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-gift"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-glass"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-globe"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hand-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hand-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hand-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hand-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hd-video"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-hdd"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-header"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-headphones"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-heart-empty"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-home"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-import"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-inbox"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-info-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-leaf"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-link"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-list"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-list-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-lock"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-log-in"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-log-out"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-magnet"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-map-marker"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-minus"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-minus-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-move"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-music"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-new-window"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-off"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ok"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ok-circle"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-ok-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-open"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-paperclip"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-phone-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-picture"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plane"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-play-circle"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-print"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-pushpin"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-qrcode"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-question-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-random"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-record"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-registration-mark"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-remove-circle"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-remove-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-repeat"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-resize-full"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-resize-horizontal"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-resize-small"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-resize-vertical"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-retweet"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-road"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-save"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-saved"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-screenshot"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sd-video"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-send"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-share"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-share-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-shopping-cart"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-signal"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sort-by-order-alt"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sound-5-1"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sound-6-1"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sound-7-1"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sound-dolby"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-sound-stereo"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-star"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-star-empty"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-stats"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-subtitles"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tag"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tags"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tasks"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-th"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-th-large"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-th-list"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-thumbs-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-thumbs-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-time"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tint"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tower"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-transfer"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tree-conifer"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tree-deciduous"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-unchecked"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-usd"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-volume-off"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-warning-sign"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-wrench"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></a></li> <li><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></a></li> </ul> </div> </div> </div> </div> </div> <div class="row"> <p class="lead"><strong>Output:</strong></p> <div class="well"> <div id="result"> <div id="button"></div> <br> <p><input id="output" type="text" class="form-control input-block-level" placeholder="Output"></p> </div> </div> </div> </div> <div class="text-center"><div style="margin-top:10px"> <center>    <div style="width: 728px;display:inline-block" id="bsap_1305164" class="bsarocks bsap_ac1f95c148ce6148393fd34e69a52240"></div>  <div class="hidden-xs hidden-sm hidden-md j8c3v" style="max-width:300px;vertical-align:top;display:inline-block;margin-left:10px;height:90px;"></div> </center> </div> </div> </div> <footer class="bs-footer" role="contentinfo"> <div class="container"> <div class="bs-social"> <ul class="bs-social-buttons"> <li class="facebook-button"> <div id="fb-root"></div> <div id="js-facebook-share" class="fb-like" data-href="http://bootsnipp.com" data-width="130" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div> </li> <li class="follow-btn"> <a id="js-twitter-follow" href="https://twitter.com/bootsnipp" class="twitter-follow-button" data-show-count="false">Follow @bootsnipp</a> </li> <li class="tweet-btn"> <a id="js-twitter-tweet" href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootsnipp.com" data-text="RT Design elements and code snippets for #twbootstrap HTML/CSS/JS framework" data-via="bootsnipp" data-related="bootsnipp">Tweet</a> </li> </ul> </div> <p>Bootsnipp.com © 2017 <a href="http://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="https://bootsnipp.com/privacy" target="_blank">Site Privacy policy</a> | <a href="/about">About</a> | <a href="mailto:bootsnipp@gmail.com">Advertise</a> | Featured snippets are <a href="https://bootsnipp.com/license">MIT license.</a> </p> </div> </footer> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="/dist/scripts.min.js"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="//www.danstools.com/js/forum.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script type="text/javascript"> !function(e){"use strict";var t=function(t,n){this.$element=e(t);this.options=e.extend({},e.fn.typeahead.defaults,n);this.matcher=this.options.matcher||this.matcher;this.sorter=this.options.sorter||this.sorter;this.highlighter=this.options.highlighter||this.highlighter;this.updater=this.options.updater||this.updater;this.source=this.options.source;this.$menu=e(this.options.menu);this.shown=false;this.listen()};t.prototype={constructor:t,select:function(){var e=this.$menu.find(".active").attr("data-value");this.$element.val(this.updater(e)).change();return this.hide()},updater:function(e){return e},show:function(){var t=e.extend({},this.$element.position(),{height:this.$element[0].offsetHeight});this.$menu.insertAfter(this.$element).css({top:t.top+t.height,left:t.left}).show();this.shown=true;return this},hide:function(){this.$menu.hide();this.shown=false;return this},lookup:function(t){var n;this.query=this.$element.val();if(!this.query||this.query.length<this.options.minLength){return this.shown?this.hide():this}n=e.isFunction(this.source)?this.source(this.query,e.proxy(this.process,this)):this.source;return n?this.process(n):this},process:function(t){var n=this;t=e.grep(t,function(e){return n.matcher(e)});t=this.sorter(t);if(!t.length){return this.shown?this.hide():this}return this.render(t.slice(0,this.options.items)).show()},matcher:function(e){return~e.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(e){var t=[],n=[],r=[],i;while(i=e.shift()){if(!i.toLowerCase().indexOf(this.query.toLowerCase()))t.push(i);else if(~i.indexOf(this.query))n.push(i);else r.push(i)}return t.concat(n,r)},highlighter:function(e){var t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),function(e,t){return"<strong>"+t+"</strong>"})},render:function(t){var n=this;t=e(t).map(function(t,r){t=e(n.options.item).attr("data-value",r);t.find("a").html(n.highlighter(r));return t[0]});t.first().addClass("active");this.$menu.html(t);return this},next:function(t){var n=this.$menu.find(".active").removeClass("active"),r=n.next();if(!r.length){r=e(this.$menu.find("li")[0])}r.addClass("active")},prev:function(e){var t=this.$menu.find(".active").removeClass("active"),n=t.prev();if(!n.length){n=this.$menu.find("li").last()}n.addClass("active")},listen:function(){this.$element.on("focus",e.proxy(this.focus,this)).on("blur",e.proxy(this.blur,this)).on("keypress",e.proxy(this.keypress,this)).on("keyup",e.proxy(this.keyup,this));if(this.eventSupported("keydown")){this.$element.on("keydown",e.proxy(this.keydown,this))}this.$menu.on("click",e.proxy(this.click,this)).on("mouseenter","li",e.proxy(this.mouseenter,this)).on("mouseleave","li",e.proxy(this.mouseleave,this))},eventSupported:function(e){var t=e in this.$element;if(!t){this.$element.setAttribute(e,"return;");t=typeof this.$element[e]==="function"}return t},move:function(e){if(!this.shown)return;switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault();this.prev();break;case 40:e.preventDefault();this.next();break}e.stopPropagation()},keydown:function(t){this.suppressKeyPressRepeat=~e.inArray(t.keyCode,[40,38,9,13,27]);this.move(t)},keypress:function(e){if(this.suppressKeyPressRepeat)return;this.move(e)},keyup:function(e){switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}e.stopPropagation();e.preventDefault()},focus:function(e){this.focused=true},blur:function(e){this.focused=false;if(!this.mousedover&&this.shown)this.hide()},click:function(e){e.stopPropagation();e.preventDefault();this.select();this.$element.focus()},mouseenter:function(t){this.mousedover=true;this.$menu.find(".active").removeClass("active");e(t.currentTarget).addClass("active")},mouseleave:function(e){this.mousedover=false;if(!this.focused&&this.shown)this.hide()}};var n=e.fn.typeahead;e.fn.typeahead=function(n){return this.each(function(){var r=e(this),i=r.data("typeahead"),s=typeof n=="object"&&n;if(!i)r.data("typeahead",i=new t(this,s));if(typeof n=="string")i[n]()})};e.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>',minLength:1};e.fn.typeahead.Constructor=t;e.fn.typeahead.noConflict=function(){e.fn.typeahead=n;return this};e(document).on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(t){var n=e(this);if(n.data("typeahead"))return;n.typeahead(n.data())})}(window.jQuery);Button=Backbone.Model.extend({defaults:{name:"Default text here",size:"",fullwidth:false,type:"btn-default",icon:"",iconplacement:""},initialize:function(){}});ButtonView=Backbone.View.extend({el:$("#result"),initialize:function(){this.model.on("change",this.render,this);this.render()},events:{"click #output":"selectOutput"},selectOutput:function(e){var t=$(e.currentTarget);t.select()},render:function(){var e=_.template("<a href=\"#\" class=\"btn<% fullwidth != false ? print(' btn-block') :'' %><% size !=''? print(' '+size) :'' %><% type !=''? print(' '+type) :'' %>\"><% if(iconplacement != 'right') { icon !=''? print('<span class=\"'+icon +'\"></span> ') : null } %><%= name %><% if(iconplacement == 'right') { icon !=''? print(' <span class=\"'+icon +'\"></span>') : null } %></a>");this.$el.find("#button").html(e(this.model.toJSON()));this.$el.find("input").val(e(this.model.toJSON()))}});SizesView=Backbone.View.extend({el:$("#sizes"),events:{"click button":"open","click .btn-block":"toggle"},open:function(e){e.preventDefault();this.model.set({size:e.currentTarget.value})},toggle:function(e){e.preventDefault();this.model.set({fullwidth:!this.model.get("fullwidth")})}});TypesView=Backbone.View.extend({el:$("#types"),events:{"click button":"open"},open:function(e){this.model.set({type:e.currentTarget.value})}});NameView=Backbone.View.extend({el:$("#input"),events:{"change input#name":"update"},update:function(e){e.preventDefault();this.model.set({name:e.currentTarget.value})}});IconView=Backbone.View.extend({el:$("#icons"),events:{"click .bs-glyphicons a":"update","click #icon-position button":"updatePosition","click #icon-color button":"updateColor","change input#search":"updateFromSearch"},updatePosition:function(e){e.preventDefault();this.model.set({iconplacement:e.currentTarget.value})},update:function(e){e.preventDefault();this.model.set({icon:$(e.currentTarget).find("span").attr("class")})},updateFromSearch:function(e){e.preventDefault();this.model.set({icon:e.currentTarget.value})}});var button=new Button;var buttonView=new ButtonView({model:button});var sizesView=new SizesView({model:button});var typesView=new TypesView({model:button});var nameView=new NameView({model:button});var iconView=new IconView({model:button});var icons=[];$(".bs-glyphicons").children().each(function(){classstr=$(this).find("a").find("span").attr("class");icons.push(classstr)});$(".typeahead").typeahead({source:icons,items:12}) </script> <div class="modal fade" id="DonateModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog" style="margin-top:100px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">脳</span><span class="sr-only">Close</span></button> <h1 class="modal-title" id="lineModalLabel">Donate</h1> </div> <div class="modal-body text-center">  <br>BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT <br>ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76 <hr> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="FDGD82NBKQDHJ"> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> <div class="modal-footer"> <div class="btn-group btn-group-justified" role="group" aria-label="group button"> <div class="btn-group" role="group"> <button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button> </div> </div> </div> </div> </div> </div> </body> </html>

CINXE.COM

Bootstrap Button Generator