Иногда нам нужно сделать самостоятельно переключатели страниц, этот дизайн работает так, что под каждой кнопкой ставим ссылку на переход. Что если на созданной страницы создаем тему, и она оказывается большой или ее нужно постоянно обновлять, а это создавать опять новые страницы, у которых появляются своя ссылка.
То здесь переключатели могут собрать эту тематику в одно целое. А точнее под каждую кнопку ставим ссылку, где при нажатие мы переходим на следующий материал на сайте.
Так выглядят переключатели:
Установка:
HTML
Код
<ul>
<li><a class="zornet_ru" href="">< Вперед</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a class="next" href="">Назад ></a></li>
</ul>
CSS
Код
ul {
text-align:center;
list-style-type:none;
margin-left:auto;
margin right:auto;
}
ul li {
display: inline;
}
ul li a {
text-decoration: none;
padding: 10px 15px;
margin: 2px;
background-color: #3e3a3a;
color: #ece9e9;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 17px;
}
ul li a:hover{
background-color: #831bbb;
color: white;
}
ul li a:active{
background-color: rgb(171, 12, 146);
color:white;
}
Как можно увидеть, что прописан класс, он предназначен для оформление, если кто решит сделать кнопки оригинальные по своему дизайн, и этот класс прописываем в CSS и выставляем нужные под оформление элементы.
Демонстрация
