Skip to content

Instantly share code, notes, and snippets.

@FZambia

FZambia/pills.css

Created March 23, 2013 07:38
Show Gist options
  • Save FZambia/5226842 to your computer and use it in GitHub Desktop.
Save FZambia/5226842 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pills.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: -o-linear-gradient(top, #ffffff, #d7d7d7);
color: #c3c3c3;
text-shadow: #fff 1px 2px 3px;
position: relative;
text-align: center;
box-shadow: 0px 3px 8px #9dc8f3, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #9dc8f3, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #9dc8f3, inset 0px 2px 3px #fff;
}
.pill a:hover {
box-shadow: 0px 3px 8px #6F6D6D, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #6F6D6D, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #6F6D6D, inset 0px 2px 3px #fff;
}
/**** info *****/
.pill.pill-info a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c8f2ff));
background-image: -webkit-linear-gradient(top, #ffffff, #c8f2ff);
background-image: -moz-linear-gradient(top, #ffffff, #c8f2ff);
background-image: -ms-linear-gradient(top, #ffffff, #c8f2ff);
background-image: -o-linear-gradient(top, #ffffff, #c8f2ff);
box-shadow: 0px 3px 8px #60c5e3, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #60c5e3, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #60c5e3, inset 0px 2px 3px #fff;
}
.pill.pill-info a:hover {
box-shadow: 0px 3px 8px #25A8D0, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #25A8D0, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #25A8D0, inset 0px 2px 3px #fff;
}
/**** success *****/
.pill.pill-success a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c7ffc7));
background-image: -webkit-linear-gradient(top, #ffffff, #c7ffc7);
background-image: -moz-linear-gradient(top, #ffffff, #c7ffc7);
background-image: -ms-linear-gradient(top, #ffffff, #c7ffc7);
background-image: -o-linear-gradient(top, #ffffff, #c7ffc7);
box-shadow: 0px 3px 8px #5fe35f, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #5fe35f, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #5fe35f, inset 0px 2px 3px #fff;
}
.pill.pill-success a:hover {
box-shadow: 0px 3px 8px #25D025, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #25D025, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #25D025, inset 0px 2px 3px #fff;
}
/**** warning *****/
.pill.pill-warning a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffe8c7));
background-image: -webkit-linear-gradient(top, #ffffff, #ffe8c7);
background-image: -moz-linear-gradient(top, #ffffff, #ffe8c7);
background-image: -ms-linear-gradient(top, #ffffff, #ffe8c7);
background-image: -o-linear-gradient(top, #ffffff, #ffe8c7);
box-shadow: 0px 3px 8px #e3ac5f, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #e3ac5f, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #e3ac5f, inset 0px 2px 3px #fff;
}
.pill.pill-warning a:hover {
box-shadow: 0px 3px 8px #D08925, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #D08925, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #D08925, inset 0px 2px 3px #fff;
}
/**** danger *****/
.pill.pill-danger a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffcac7));
background-image: -webkit-linear-gradient(top, #ffffff, #ffcac7);
background-image: -moz-linear-gradient(top, #ffffff, #ffcac7);
background-image: -ms-linear-gradient(top, #ffffff, #ffcac7);
background-image: -o-linear-gradient(top, #ffffff, #ffcac7);
box-shadow: 0px 3px 8px #e3665f, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #e3665f, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #e3665f, inset 0px 2px 3px #fff;
}
.pill.pill-danger a:hover {
box-shadow: 0px 3px 8px #D02D25, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #D02D25, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #D02D25, inset 0px 2px 3px #fff;
}
/**** inverse *****/
.pill.pill-inverse a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#918f8f));
background-image: -webkit-linear-gradient(top, #ffffff, #918f8f);
background-image: -moz-linear-gradient(top, #ffffff, #918f8f);
background-image: -ms-linear-gradient(top, #ffffff, #918f8f);
background-image: -o-linear-gradient(top, #ffffff, #918f8f);
box-shadow: 0px 3px 8px #626161, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #626161, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #626161, inset 0px 2px 3px #fff;
}
.pill.pill-inverse a:hover {
box-shadow: 0px 3px 8px #3B3A3A, inset 0px 2px 3px #fff;
-webkit-box-shadow: 0px 3px 8px #3B3A3A, inset 0px 2px 3px #fff;
-moz-box-shadow: 0px 3px 8px #3B3A3A, inset 0px 2px 3px #fff;
}
Raw
pills.html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% end %}</title>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="{{ static_url('libs/bootstrap/bootstrap-2.2.2.combined.min.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static_url('libs/jquery/jquery-1.9.0.min.js') }}"></script>
<script type="text/javascript" src="{{ static_url('libs/bootstrap/bootstrap-2.2.2.min.js') }}"></script>
<link href="{{ static_url('application/css/styles.css') }}" rel="stylesheet">
{% block extra_head %}{% end %}
</head>
<body>
<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="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-circle pill-small pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-circle pill-small pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-circle pill-small pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-circle pill-small 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-large">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-circle pill-large">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-circle pill-large">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-circle pill-large">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-circle pill-large">
<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">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-circle pill-medium">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-circle pill-medium">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-circle pill-medium">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-circle pill-medium">
<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">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-circle pill-small">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-circle pill-small">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-circle pill-small">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-circle pill-small">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-rounded pill-large pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-large pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-large pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-large pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded 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-rounded pill-medium pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-medium pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-medium pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-medium pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded 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-rounded pill-small pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-small pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-small pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-small pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded pill-small 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-rounded pill-large">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-large">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-large">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-large">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded pill-large">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-rounded pill-medium">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-medium">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-medium">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-medium">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded pill-medium">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-rounded pill-small">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-rounded pill-small">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-rounded pill-small">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-rounded pill-small">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-rounded pill-small">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-boxed pill-large pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-large pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-large pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-large pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed 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-boxed pill-medium pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-medium pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-medium pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-medium pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed 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-boxed pill-small pill-surrounded">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-small pill-surrounded">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-small pill-surrounded">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-small pill-surrounded">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed pill-small 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-boxed pill-large">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-large">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-large">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-large">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed pill-large">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-boxed pill-medium">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-medium">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-medium">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-medium">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed pill-medium">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
<div class="pill pill-info pill-boxed pill-small">
<a href="#" >
<i class="text-info">Push</i>
</a>
</div>
<div class="pill pill-success pill-boxed pill-small">
<a href="#" >
<i class="text-success">Push</i>
</a>
</div>
<div class="pill pill-warning pill-boxed pill-small">
<a href="#" >
<i class="text-warning">Push</i>
</a>
</div>
<div class="pill pill-danger pill-boxed pill-small">
<a href="#" >
<i class="text-danger">Push</i>
</a>
</div>
<div class="pill pill-inverse pill-boxed pill-small">
<a href="#" >
<i class="text-inverse">Push</i>
</a>
</div>
<div style="clear: both; margin-top: 30px;"></div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment