"Colorful Tags"
Bootstrap 3.1.0 Snippet by bennos

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <h2> Tags</h2> <div class="col-md-4"> <h3> Default</h3> <div class="tags"> <a href="http://www.jquery2dotnet.com/search/label/css">CSS</a> <a href="http://www.jquery2dotnet.com/search/label/Javascript">Java Script</a> <a href="http://www.jquery2dotnet.com/search/label/jquery">jQuery</a> <a href="http://www.jquery2dotnet.com/search/label/html5">HTML5</a> <a href="http://www.jquery2dotnet.com/search/label/css3">CSS3</a> <a href="http://www.jquery2dotnet.com/search?q=demo">DEMO</a> <a href="http://www.jquery2dotnet.com/search/label/mvc4">MVC4</a> <a href="http://www.jquery2dotnet.com/search/label/asp.net">ASP.Net</a> <a href="http://www.jquery2dotnet.com/search/label/c%23">C#</a> <a href="http://www.jquery2dotnet.com/search/label/wpf">WPF</a> <a href="http://www.jquery2dotnet.com/search/label/linq">linq</a> <a href="http://www.jquery2dotnet.com/search/label/bootstrap">Bootstrap</a> </div> </div> <div class="col-md-4"> <h3> Color</h3> <div class="tags"> <a href="http://www.jquery2dotnet.com/search/label/css" class="success">CSS</a> <a href="http://www.jquery2dotnet.com/search/label/Javascript" class="primary">Java Script</a> <a href="http://www.jquery2dotnet.com/search/label/jquery" class="info">jQuery</a> <a href="http://www.jquery2dotnet.com/search/label/html5" class="danger">HTML5</a> <a href="http://www.jquery2dotnet.com/search/label/css3" class="warning">CSS3</a> <a href="http://www.jquery2dotnet.com/search?q=demo" class="success">DEMO</a> <a href="http://www.jquery2dotnet.com/search/label/mvc4" class="danger">MVC4</a> <a href="http://www.jquery2dotnet.com/search/label/asp.net" class="info">ASP.Net</a> <a href="http://www.jquery2dotnet.com/search/label/c%23" class="primary">C#</a> <a href="http://www.jquery2dotnet.com/search/label/wpf" class="warning">WPF</a> <a href="http://www.jquery2dotnet.com/search/label/linq" class="primary">linq</a> <a href="http://www.jquery2dotnet.com/search/label/bootstrap" class="success">Bootstrap</a> </div> </div> <div class="col-md-4"> <h3> Hover:Color</h3> <div class="tags"> <a href="http://www.jquery2dotnet.com/search/label/css" class="btn-warning">CSS</a> <a href="http://www.jquery2dotnet.com/search/label/Javascript" class="btn-primary">Java Script</a> <a href="http://www.jquery2dotnet.com/search/label/jquery" class="btn-danger">jQuery</a> <a href="http://www.jquery2dotnet.com/search/label/html5" class="btn-success">HTML5</a> <a href="http://www.jquery2dotnet.com/search/label/css3" class="btn-info">CSS3</a> <a href="http://www.jquery2dotnet.com/search?q=demo" class="btn-danger">DEMO</a> <a href="http://www.jquery2dotnet.com/search/label/mvc4" class="btn-warning">MVC4</a> <a href="http://www.jquery2dotnet.com/search/label/asp.net" class="btn-info">ASP.Net</a> <a href="http://www.jquery2dotnet.com/search/label/c%23" class="btn-primary">C#</a> <a href="http://www.jquery2dotnet.com/search/label/wpf" class="btn-success">WPF</a> <a href="http://www.jquery2dotnet.com/search/label/linq" class="btn-primary">linq</a> <a href="http://www.jquery2dotnet.com/search/label/bootstrap" class="btn-danger">Bootstrap</a> </div> </div> </div> </div>
.tags a{border:1px solid #DDD;display:inline-block;color:#717171;background:#FFF;-webkit-box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);box-shadow:0 1px 1px 0 rgba(180,180,180,0.1);-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out;border-radius:2px;margin:0 3px 6px 0;padding:5px 10px} .tags a:hover{border-color:#08C;} .tags a.primary{color:#FFF;background-color:#428BCA;border-color:#357EBD} .tags a.success{color:#FFF;background-color:#5CB85C;border-color:#4CAE4C} .tags a.info{color:#FFF;background-color:#5BC0DE;border-color:#46B8DA} .tags a.warning{color:#FFF;background-color:#F0AD4E;border-color:#EEA236} .tags a.danger{color:#FFF;background-color:#D9534F;border-color:#D43F3A}

Related: See More


Questions / Comments: