bootstrap pills

by FZambia

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="row-fluid">

    <div class="pill pill-info pill-circle pill-large pill-surrounded">
        <a href="#" >
            <i class="text-info">Push</i>
        </a>
    </div>
    <div class="pill pill-success pill-circle pill-large pill-surrounded">
        <a href="#" >
            <i class="text-success">Push</i>
        </a>
    </div>
    <div class="pill pill-warning pill-circle pill-large pill-surrounded">
        <a href="#" >
            <i class="text-warning">Push</i>
        </a>
    </div>
    <div class="pill pill-danger pill-circle pill-large pill-surrounded">
        <a href="#" >
            <i class="text-danger">Push</i>
        </a>
    </div>
    <div class="pill pill-inverse pill-circle pill-large pill-surrounded">
        <a href="#" >
            <i class="text-inverse">Push</i>
        </a>
    </div>

    <div style="clear: both; margin-top: 30px;"></div>

    <div class="pill pill-info pill-circle pill-medium pill-surrounded">
        <a href="#" >
            <i class="text-info">Push</i>
        </a>
    </div>
    <div class="pill pill-success pill-circle pill-medium pill-surrounded">
        <a href="#" >
            <i class="text-success">Push</i>
        </a>
    </div>
    <div class="pill pill-warning pill-circle pill-medium pill-surrounded">
        <a href="#" >
            <i class="text-warning">Push</i>
        </a>
    </div>
    <div class="pill pill-danger pill-circle pill-medium pill-surrounded">
        <a href="#" >
            <i class="text-danger">Push</i>
        </a>
    </div>
    <div class="pill pill-inverse pill-circle pill-medium pill-surrounded">
        <a href="#" >
            <i class="text-inverse">Push</i>
        </a>
    </div>

    <div style="clear: both; margin-top: 30px;"></div>

    <div class="pill pill-info pill-circle pill-small pill-surrounded">
        <a href="#" >
   ...

CSS

.pill {
margin: 0;
text-align: center;
display: inline-block;
position: relative;
}
 
.pill.pill-large a {
height: 100px;
line-height: 100px;
width: 100px;
}
.pill.pill-medium a {
height: 60px;
line-height: 60px;
width: 60px;
}
.pill.pill-small a {
height: 30px;
line-height: 30px;
width: 30px;
}
 
.pill a {
font-size: 14px;
font-weight: bold;
margin: 10px;
text-decoration: none;
text-shadow: 1px 2px 3px #FFFFFF;
}
 
 
.pill.pill-circle a {
border-radius: 50% 50% 50% 50%;
box-shadow: 0 3px 8px #AAAAAA, 0 2px 3px #FFFFFF inset;
}
.pill.pill-rounded a {
border-radius: 20% 20% 20% 20%;
box-shadow: 0 3px 8px #AAAAAA, 0 2px 3px #FFFFFF inset;
}
.pill.pill-boxed a {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 1px #AAAAAA, 0 0 1px #FFFFFF inset;
}
 
 
.pill.pill-circle.pill-surrounded {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
border-bottom: 2px solid #FFFFFF;
border-radius: 50% 50% 50% 50%;
border-top: 2px solid #AAAAAA;
box-shadow: 0 8px 24px rgba(255, 255, 255, 0.5) inset;
}
.pill.pill-rounded.pill-surrounded {
background: none repeat scroll 0 0 #EAEAEA;
border-bottom: 2px solid #FFFFFF;
border-radius: 20% 20% 20% 20%;
border-top: 2px solid #AAAAAA;
box-shadow: 0 8px 24px #CBCBCB inset;
}
.pill.pill-boxed.pill-surrounded {
background: none repeat scroll 0 0 #EAEAEA;
border-bottom: 2px solid #DEDEDE;
border-radius: 4px 4px 4px 4px;
border-top: 2px solid #AAAAAA;
box-shadow: 0 8px 24px #CBCBCB inset;
}
 
.pill a i {
font-weight: bold;
margin-top: 0;
font-style: normal;
}
 
.pill.pill-large a i {
font-size: 30px;
}
.pill.pill-medium a i {
font-size: 20px;
}
.pill.pill-small a i {
font-size: 10px;
}
 
.pill a {
display: block;
background-color: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d7d7d7));
background-image: -webkit-linear-gradient(top, #ffffff, #d7d7d7);
background-image: -moz-linear-gradient(top, #ffffff, #d7d7d7);
background-image: -ms-linear-gradient(top, #ffffff, #d7d7d7);
background-image:...