Переключатели страниц

На сайте каждый элемент должен быть продуман. У нас вы можете найти большое количество стилей переключателей страниц и подобрать подходящий вам пример для Вашего сайта.
Первый переключатель сделан в виде квадратных бледно серых кнопок с черными цифрами.

 .catPages1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #636363;background:#F9F9F9;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {background:#6B82A4;color:#FFFFFF;font-weight:bold;}
 .catPages1 b {text-decoration:none;background:#FFF;padding:3px 10px;color:#ccc;font-size:11px;}

Стильный переключатель синего цвета с черными цифрами в прямоугольных фигурах с закругленными углами:

 /* Page Selector Style */
 .catPages1, .pagesBlockuz1, .pagesBlockuz2 {color:#ffffff;border:0px;margin-bottom:8px;margin-top:9px;}
 .catPages1 a:link, .pagesBlockuz1 a:link, .pagesBlockuz2 a:link,
 .catPages1 a:visited, .pagesBlockuz1 a:visited, .pagesBlockuz2 a:visited,
 .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover,
 .catPages1 a:active, .pagesBlockuz1 a:active, .pagesBlockuz2 a:active {text-decoration:none;color: #000000;background:#51B5EA;padding:2px 8px;font-size:10px;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}
 .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover {background:#04b0eb;color:#000000;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}
 .catPages1 b, .pagesBlockuz1 b, .pagesBlockuz2 b {text-decoration:none; background:#007fff; padding:2px 8px; color:#000000; font-size:10px;-moz-border-radius: 3px;border-radius: 3px;}
 /* ----------------------- */

Переключатели серого цвета с горизонтальными слабыми полосами цифрами белого цвета в них:

/* Page Selector / Start */
 .catPages1 {color:#fff;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #fff;BACKGROUND-IMAGE:URL(http://s48.radikal.ru/i119/0902/cb/691c18163c7e.png);border:1PX SOLID #999999; padding:2px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {BACKGROUND-IMAGE:URL(http://s58.radikal.ru/i161/0902/15/7106ad9140b5.png);color:#fff;font-weight:bold;}
 .catPages1 b {text-decoration:none;BACKGROUND-IMAGE:URL(http://s58.radikal.ru/i161/0902/15/7106ad9140b5.png);border:1PX SOLID #999999;padding:2px 10px;color:#303b45;font-size:11px;}

 .catPages2 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages2 a:link,
 .catPages2 a:visited,
 .catPages2 a:hover,
 .catPages2 a:active {text-decoration:none;color: #636363;background:#F9F9F9;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages2 a:hover {background:#6B82A4;color:#FFFFFF;font-weight:bold;}
 .catPages2 b {text-decoration:none;background:#FFFFFF;padding:3px 10px;color:#ccc;font-size:11px;}

 /* Page Selector Style / End */

Удобный переключатель в строгих формах. Выделенная страница выделяется темных цветом, а все остальные страницы остаются бледными:

catPages1 {color:#EFEEEB;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #636363;background:#F9F9F9;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {background:#6B82A4;color:#FFFFFF;font-weight:bold;}
 .catPages1 b {text-decoration:none;background:#FFF;padding:3px 10px;color:#ccc;font-size:11px;}

Переключатель с прямоугольниками, которые по краям сделаны в красном цвете, а внутренность прозрачная. Нужно вставлять в CSS.

/* Переключатели страниц */
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:active {
 text-decoration:none;
 color: #C80000;
 background:#DBDBDB;
 border:1px solid #C80000;
 padding:1px 3px 1px 3px;
 font-size:11px;
 font-weight:bold;
 }

 .catPages1 a:hover {
 color:#6B6B6B;
 border-color:#6B6B6B;
 }

 .catPages1 b {
 border:1px solid #C80000;
 padding:1px 3px 1px 3px;
 color:#6B6B6B;
 }

 .pagesBlock1 {
 font-size:11px;
 font-weight:bold;
 }

Переключатель с синими прямоугольниками и белыми цифрами, с функциями «обратно» и «следующая». Следует вставлять в конец CSS кода.

.catPages1 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #fff;background:#4888BE;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {background:#3B6F9B;color:#AED6FF;font-weight:bold;}
 .catPages1 b {text-decoration:none;background:#4888BE;padding:3px 10px;color:#AED6FF;font-size:11px;}

 .catPages2 {color:#AED6FF;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages2 a:link,
 .catPages2 a:visited,
 .catPages2 a:hover,
 .catPages2 a:active {text-decoration:none;color: #fff;background:#4888BE;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages2 a:hover {background:#3B6F9B;color:#AED6FF;font-weight:bold;}
 .catPages2 b {text-decoration:none;background:#4888BE;padding:3px 10px;color:#AED6FF;font-size:11px;}

Желтый переключатель с овальными прямоугольниками и черными цифрами. Можно вставлять в любое место CSS.

/* Page Selector Style */
 .catPages1, .pagesBlockuz1, .pagesBlockuz2 {color:#ffffff;border:0px;margin-bottom:8px;margin-top:9px;}
 .catPages1 a:link, .pagesBlockuz1 a:link, .pagesBlockuz2 a:link,
 .catPages1 a:visited, .pagesBlockuz1 a:visited, .pagesBlockuz2 a:visited,
 .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover,
 .catPages1 a:active, .pagesBlockuz1 a:active, .pagesBlockuz2 a:active {text-decoration:none;color: #000000;background:#fd9b00;padding:2px 8px;font-size:10px;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}
 .catPages1 a:hover, .pagesBlockuz1 a:hover, .pagesBlockuz2 a:hover {background:#ebdd04;color:#000000;font-weight:bold;-moz-border-radius: 3px;border-radius: 3px;}
 .catPages1 b, .pagesBlockuz1 b, .pagesBlockuz2 b {text-decoration:none; background:#ff4200; padding:2px 8px; color:#000000; font-size:10px;-moz-border-radius: 3px;border-radius: 3px;}
 /* ----------code-by-microCD-cool-zona.org.ua------------- */

Переключатель сделан сплошной черной линией. Когда переключаешь страницу, появляется белый прямоугольник. Можно вставлять в любое место CSS.

.catPages2 {color:#000000;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages2 a:link,
 .catPages2 a:visited,
 .catPages2 a:hover,
 .catPages2 a:active {text-decoration:none;color: #FFFFFF;background:#BEBEBE;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages2 a:hover {background:#000000;color:#000000;font-weight:bold;}
 .catPages2 b {text-decoration:none;background:#000000;padding:3px 10px;color:#000000;font-size:11px;}
 .catPages1 {color:#607080;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #FFFFFF;background:#000000;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {background:#FFFFFF;color:#000000;font-weight:bold;}
 .catPages1 b {text-decoration:none;background:#FFFFFF;padding:3px 10px;color:#000000;font-size:11px;}

Можно вставлять в любое место CSS. Цвет переключателя программист может менять под свой стиль сайта:

 .catPages1 {color:#0ad7ef;border:0px;margin-bottom:10px;margin-top:10px;}
 .catPages1 a:link,
 .catPages1 a:visited,
 .catPages1 a:hover,
 .catPages1 a:active {text-decoration:none;color: #636363;background:#F9F9F9;padding:3px 10px;font-size:11px;font-weight:bold;}
 .catPages1 a:hover {background:#0ad7ef;color:#FFFFFF;font-weight:bold;}
 .catPages1 b {text-decoration:none;background:#FFF;padding:3px 10px;color:#ccc;font-size:11px;}