Круглые кнопки панели постраничной навигации

Пример формирования круглых кнопок для панели постраничной навигации сайта с помощью CSS3

HTML

<div class="container">  
   <div class="pagination">
     <ul>
         <li><a href="#" title="Назад" >&laquo;</a></li>
         <li><a href="#" title="Страница 1">1</a></li>
         <li><a href="#" title="Страница 2">2</a></li>
         <li><a href="#" title="Страница 3" >3</a></li>
         <li><a href="#" title="Страница 4" >4</a></li>
         <li><a href="#" title="Страница 5" >5</a></li>
         <li><a href="#" title="Страница 6" >6</a></li>
         <li><a href="#" title="Страница 7" >7</a></li>
         <li><a href="#" title="Страница 8" >8</a></li>
         <li><a href="#" title="Страница 9" >9</a></li>
         <li><a href="#" title="Страница 10">10</a></li>
           <li><a href="#" title="Страница 10">10</a></li>
             <li><a href="#" title="Страница 10">10</a></li>
               <li><a href="#" title="Страница 1">1</a></li>
         <li><a href="#" title="Страница 2">2</a></li>
         <li><a href="#" title="Страница 3" >3</a></li>
         <li><a href="#" title="Страница 4" >4</a></li>
         <li><a href="#" title="Страница 5" >5</a></li>
         <li><a href="#" title="Страница 6" >6</a></li>
         <li><a href="#" title="Страница 7" >7</a></li>
         <li><a href="#" title="Страница 8" >8</a></li>
         <li><a href="#" title="Страница 9" >9</a></li>
         <li><a href="#" title="Страница 10">10</a></li>
           <li><a href="#" title="Страница 10">10</a></li>
             <li><a href="#" title="Страница 10">10</a></li>
         <li><a href="#" title="Вперед">&raquo;</a></li>
      </ul>
   </div>
   <div class="dark-pagination">
     <ul>
         <li><a href="#" title="Назад" >&laquo;</a></li>
         <li><a href="#" title="Страница 1">1</a></li>
         <li><a href="#" title="Страница 2">2</a></li>
         <li><a href="#" title="Страница 3" >3</a></li>
         <li><a href="#" title="Страница 4" >4</a></li>
         <li><a href="#" title="Страница 5" >5</a></li>
         <li><a href="#" title="Страница 6"...

CSS

.container {
    margin: 0 auto;
    max-width: 600px;
    padding: 20px;
}
/* Вариант пагинации для светлого фона 
*/
.pagination {
    border: 1px solid #ddd;
    width: 100%;
    text-align: center;
    padding: 10px;
    margin: 10px auto;
}

.pagination ul {
    width: 100%;
    padding: 0;
    margin: 0;
}

.pagination ul li {
    display: inline-block;
    list-style: none;
    margin: 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    text-align: center;
}

.pagination ul li a,.pagination ul li a:visited {
    display: block;
    text-decoration: none;
    color: #555;
    background: -moz-linear-gradient(#fafafa,#dadada) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#dadada));
    background: -o-linear-gradient(#fafafa,#dadada);
    background: -ms-linear-gradient(top,#fafafa 0%,#dadada 100%);
/* IE10+ */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FAFAFA',EndColorStr='#DADADA',GradientType=0);
/* IE6-9 */
    border: 1px solid #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    line-height: 26px;
    text-shadow: none;
    top: -1px;
    -webkit-box-shadow: 0 0 0 1px #f4f4f4,1px 1px 3px #ddd;
    -moz-box-shadow: 0 0 0 1px #f4f4f4,1px 1px 3px #ddd;
    box-shadow: 0 0 0 1px #f4f4f4,1px 1px 3px #ddd;
}

.pagination ul li a:hover {
    display: block;
    background: -moz-linear-gradient(#dadada,#fafafa) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left top,left bottom,from(#dadada),to(#fafafa));
    background: -o-linear-gradient(#dadada,#fafafa);
    background: -ms-linear-gradient(top,#dadada 0%,#fafafa 100%);
/* IE10+ */
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#DADADA',EndColorStr='#FAFAFA',GradientType=0);
/* IE6-9 */
    text-decoration: none;
}

.pagination ul li a:active {
   ...