<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/victor-valencia/bootstrap-iconpicker/master/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'> <div class="container"> <div class="row"> <div class="dropdown button-designer"> <button type="button" class="btn btn-default" data-toggle="dropdown">Shadow Button</button> <div class="dropdown-menu"> <div class="row"> <div class="col-sm-4"> <button type="button" class="btn btn-primary btn-block">Primary</button> <button type="button" class="btn btn-info btn-block">Info</button> <button type="button" class="btn btn-success btn-block">Success</button> <button type="button" class="btn btn-warning btn-block">Warning</button> <button type="button" class="btn btn-danger btn-block">Danger</button> <button type="button" class="btn btn-inverse btn-block">Inverse</button> <button type="button" class="btn btn-default btn-block">Default</button> </div> <div class="col-sm-8"> <div class="row"> <div class="col-sm-8"> <div id="ipicker" role="iconpicker"></div> </div> <div class="col-sm-4"> <button type="button" class="btn btn-primary btn-block btn-shadow">Shadow</button> <button type="button" class="btn btn-primary btn-block btn-rounded">Rounded</button> <button type="button" class="btn btn-outline btn-block">Outline</button> <button type="button" class="btn btn-primary btn-block btn-circle"><i class="fa fa-circle"></i></button> </div> </div> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> </div> <div class="row"> </div> <div class="row"> <div class="col-sm-12"> <button type="button" class="btn btn-primary btn-full">Block</button> </div> </div> </div> </div> </div> </div> </div> </div> <script src='https://cdn.rawgit.com/victor-valencia/bootstrap-iconpicker/master/bootstrap-iconpicker/js/iconset/iconset-all.min.js'></script> <script src='https://cdn.rawgit.com/victor-valencia/bootstrap-iconpicker/master/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js'></script>

.btn-circle { width: 45px; height: 45px; text-align: center !important; padding: 0; border-radius: 50%; -webkit-border-radius: 50%; } .button-designer .dropdown-menu{ min-width: 500px !important; padding: 10px; } .btn-full{ width: 100%; } .btn-rounded { border-radius: 30px !important; -webkit-border-radius: 30px !important; } .btn-shadow { box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.2); -webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0, 0.2); } .btn-outline { background-color: transparent; color: inherit; transition: all .5s; } .btn-primary.btn-outline { color: #428bca; } .btn-success.btn-outline { color: #5cb85c; } .btn-info.btn-outline { color: #5bc0de; } .btn-warning.btn-outline { color: #f0ad4e; } .btn-danger.btn-outline { color: #d9534f; } .btn-primary.btn-outline:hover, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover { color: #fff; }

$(function(){ $('.dropdown-menu').click(function(event){ event.stopPropagation(); }); })