Bootstrap snippet: icon buttons

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: bootstrap,snippet,icon,buttons,css

<link href="//" 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>
.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;}

icon buttons

  Dec 11th 2014, 09:27