<ol class="pagination_list">
<li><<</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>>></li>
</ol>
ol.pagination_list {
list-style-type: none;
position: relative;
top: 0;
margin: 25px 0 0 25px;
}
ol.pagination_list li {
border-radius:40px 40px 40px 40px;
border-radius: 40px;
border-radius: 40px 40px 40px 40px;
box-shadow:1px 2px 4px grey;
box-shadow:1px 2px 4px grey;
box-shadow:1px 2px 4px grey; /* Opera 10.5, IE 9 */
background: #B3C2CC;
background:linear-gradient(center bottom , #E9EDF6, #A9BAC5) repeat scroll 0 0 transparent;
background: gradient(linear, left top, left bottom, from(#A9BAC5), to(#E9EDF6));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9edf6', EndColorStr='#a9bac5'); /* IE6,IE7 */
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9edf6', EndColorStr='#a9bac5')"; /* IE8 */
border-color:#FFFFFF #E7EBEE #E7EBEE #FFFFFF;
border-style:solid;
border-width:1px;
color:grey;
display:inline-block;
font-family:verdana;
font-size:10px;
font-weight:bold;
margin:0 0 20px 17px;
padding:3px 5px;
text-shadow:1px 1px 2px #FFFFFF;
}
ol.pagination_list li:hover {
cursor:pointer;
color:#222;
}
ol.pagination_list li:active {
color: #708296;
border-color: lightgrey;
text-shadow:1px 1px 2px #FFFFFF;
box-shadow: none;
box-shadow:none;
box-shadow: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.