<ol class="pagination_list">
    <li>&lt;&lt;</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>&gt;&gt;</li>
</ol>
ol.pagination_list {
    list-style-type: none;
    position: relative;
    top: 0;
    margin: 25px 0 0 25px;
}

ol.pagination_list li {
    -moz-border-radius:40px 40px 40px 40px;
    -webkit-border-radius: 40px; 
    border-radius: 40px 40px 40px 40px;
    -moz-box-shadow:1px 2px 4px grey;
    -webkit-box-shadow:1px 2px 4px grey;
    box-shadow:1px 2px 4px grey; /* Opera 10.5, IE 9 */
    background: #B3C2CC;
    background:-moz-linear-gradient(center bottom , #E9EDF6, #A9BAC5) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, left bottom, from(#A9BAC5), to(#E9EDF6));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9edf6', EndColorStr='#a9bac5'); /* IE6,IE7 */
    -ms-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;
    -moz-box-shadow: none;
    -webkit-box-shadow:none;
    box-shadow: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.