icon buttons

This bootstrap snippet called "icon buttons" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: bootstrap,snippet,icon,buttons,css

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"><div class="container bootstrap snippet">    <div class="buttons-preview">        <a class="btn btn-default btn-lg shiny icon-only blue" href="javascript:void(0);"><i class="fa fa-plus"></i></a>        <a class="btn btn-default shiny icon-only yellow" href="javascript:void(0);"><i class="fa fa-lock "></i></a>        <a class="btn btn-default btn-sm shiny icon-only danger" href="javascript:void(0);"><i class="fa fa-times "></i></a>        <a class="btn btn-default btn-xs shiny icon-only success" href="javascript:void(0);"><i class="fa fa-cog"></i></a>    </div></div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

.buttons-preview .btn, .buttons-preview .btn-group {    margin-bottom: 10px;    margin-right: 10px;}.btn.shiny, .btn-default.shiny {    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0d…0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);    background-image: -webkit-linear-gradient(top,#fff 0,#ededed 100%);    background-image: -moz-linear-gradient(top,#fff 0,#ededed 100%);    background-image: -o-linear-gradient(top,#fff 0,#ededed 100%);    background-image: linear-gradient(to bottom,#fff 0,#ededed 100%);}.btn-lg.icon-only {    width: 40px;    height: 38px;    padding: 6px!important;}.btn.shiny {    -webkit-box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);    -moz-box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);    box-shadow: 0 1px 3px 1px rgba(0,0,0,.1);    -webkit-border-radius: 3px;    -webkit-background-clip: padding-box;    -moz-border-radius: 3px;    -moz-background-clip: padding;    border-radius: 3px;    background-clip: padding-box;}.btn, .btn-default, .btn:focus, .btn-default:focus {    color: #444;    background-color: #fff;    border-color: #ccc;}.btn-lg {    line-height: 1.35;    padding: 9px 18px;    font-size: 14px;}.btn.icon-only>.fa, .btn.icon-only .typcn, .btn.icon-only .glyphicon, .btn.icon-only>[class*="wi-"] {    margin: 0;    vertical-align: middle;    text-align: center;    padding: 0;    font-size: 22px;    line-height: 22px;}.blue {    color: #5db2ff!important;}.danger {    color: #d73d32!important;}.yellow {    color: #ffce55!important;}.success {    color: #53a93f!important;}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Dec 11th 2014, 09:27

Views: 788