Untuk membuat style ini membutuhkan Bootstrap sebagai CSS frameworknya, Bootstrap dapat di download di web utama getbootstrap.com.
Selanjutnya siapkan HTML Code dan CSS Code untuk membuat stylenya, berikut ini merupakan codenya yang dapat di copy paste langsung untuk mencobanya.
HTML Code
<div class=”container”>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round round-sm hollow “>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm hollow blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm hollow orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm hollow green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round hollow”>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round hollow blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round hollow orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round hollow green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round round-lg hollow “>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg hollow blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg hollow orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg hollow green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round round-sm”>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-sm green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round”>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-sm-1″>
<div class=”round round-lg”>
<span class=”glyphicon glyphicon-file”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg blue”>
<span class=”glyphicon glyphicon-user”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg orange”>
<span class=”glyphicon glyphicon-tags”></span>
</div>
</div>
<div class=”col-sm-1″>
<div class=”round round-lg green”>
<span class=”glyphicon glyphicon-trash”></span>
</div>
</div>
</div>
</div>
CSS Code
.row {
margin-top: 30px;
}
.round {
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #222;
color: #FFF;
text-align: center;
}
.round.hollow {
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #FFF;
color: #222;
text-align: center;
-webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
}
.round.round-sm {
height: 20px;
width: 20px;
line-height: 20px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 0.7em;
}
.round.round-lg {
height: 40px;
width: 40px;
line-height: 40px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 1.5em;
}
.round.blue {
background-color: #3EA6CE;
}
.round.orange {
background-color: #FF6701;
}
.round.green {
background-color: #42A129;
}
.round.hollow.blue {
color: #3EA6CE;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #3EA6CE;
-moz-box-shadow: 0px 0px 0px 3px #3EA6CE;
box-shadow: 0px 0px 0px 3px #3EA6CE;
}
.round.hollow.orange {
color: #FF6701;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #FF6701;
-moz-box-shadow: 0px 0px 0px 3px #FF6701;
box-shadow: 0px 0px 0px 3px #FF6701;
}
.round.hollow.green {
color: #42A129;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #42A129;
-moz-box-shadow: 0px 0px 0px 3px #42A129;
box-shadow: 0px 0px 0px 3px #42A129;
}
