Modern CSS Tags

index.html

<div class="container">
  <div class="row">
     <div class="col-lg-12">
       <ul class="colors">
        <li style="background: #000;"></li>  
        <li style="background: #022c87;"></li>
        <li style="background: #790548;"></li>
        <li style="background: #ff0000;"></li>
        <li style="background: #4f4f4f;"></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 text-center">
      <h3 id="title">Choose from over 100 courses!</h3>
    </div>
    <div class="col-lg-8">
      <ul class="tags">
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw purple"></span> HTML</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw blue"></span> CSS</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw yellow"></span> SASS</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw dark-blue"></span> LESS</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw light-purple"></span> HAML</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw pink"></span> RUBY</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw green"></span> COFFEESCRIPT</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw cyan"></span> yeoman</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw purple"></span> angular.js</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw yellow"></span> grunt</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw blue"></span> yaml</li></a>
        <a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw dark-blue"></span> javascript</li></a>
      </ul>
    </div>
  </div>
</div>

Modern CSS Tags.markdown

Modern CSS Tags

Modern CSS Tags using only css, fontawesome, bootstrap and hover.css

A Pen by Justin Cron on CodePen.

License.

script.js

/* this uses fontawesome & bootstrap 3 */

$(document).ready( function() {
  
  $(".colors li").click(function() {
    var color = $(this).css("background-color");
    $(".tag").css("background-color",color);
    $("#title").css("color",color);
  });
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* justincron.com */

@import url(http://fonts.googleapis.com/css?family=Patua+One);

body {
  background-color:#2D3339;
  color:#fff;
}
.container {
  max-width:980px;
}
.row {
  margin:20px 0;
}
h3 {
  font-family: 'Patua One', cursive;
  letter-spacing:1px
}
.tags>a>li:hover {
  color:#fff;
  background-color: #262626;
}
.tags li {
  list-style:none;
  display:inline-block;
  background-color:#F0F2F4;
  border-radius:5px;
  padding:5px 10px;
  font-size:18px;
  font-family: 'Patua One', cursive;
  color:#B2BAC2;
  box-shadow:0px 0px 7px black;
  margin:3px 1px 3px 1px;
  line-height:27px;
  text-transform:uppercase;
}
.purple {
  color:#913B53;
  font-size:13px;
}
.blue {
  color:#39ADD1;
  font-size:13px;
}
.yellow {
  color:#E0AB18;
  font-size:13px;
}
.dark-blue {
  color:#2570A8;
  font-size:13px;
}
.light-purple {
  color:#9D8AC7;
  font-size:13px;
}
.pink {
  color:#E15258;
  font-size:13px;
}
.orange {
  color:#F9845B;
  font-size:13px;
}
.green {
  color:#51B46D;
  font-size:13px;
}
.cyan {
  color:#53BBB4;
  font-size:13px;
}

.colors {
  list-style:none;
}
.colors li{
  display: inline-block;
  width:15px;
  height: 15px;
}

styles

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://www.adventures.org/GlobalAction/cga2.0/css/hover.css" rel="stylesheet" />