В данном материале мы расскажем как можно быстро и легко добавить на ваш сайт стильные и адаптивные кнопки для перехода между материалами с использованием системных переменных $PREV_ENTRY$ и $NEXT_ENTRY$.

Описание переменных 

$PREV_ENTRY$ - ссылка на предыдущий материал модуля;
$NEXT_ENTRY$ - ссылка на следующий материал модуля;

Пошаговая инструкция по размещению кнопок переключателей

1. Для начала необходимо разместить HTML-код для вывода будущих кнопок. Перейдите во вкладку “Дизайн” - “Управление дизайном” - “Редактирование шаблонов” - откройте на редактирование шаблон “Страница материалов и комментариев к нему” и добавьте следующий код в место, где вы бы хотели чтобы, отображались ваши переключатели:

<div id="material-nav">
<div><?if($PREV_ENTRY$)?>$PREV_ENTRY$ <?else?>Предыдущих материалов нет<?endif?></div>
<div><?if($NEXT_ENTRY$)?>$NEXT_ENTRY$ <?else?>Следующих материалов нет<?endif?></div>
</div>

2. Далее добавьте стилевые настройки для красивого оформления ваших кнопок. Для этого необходимо перейти в шаблон “Таблица стилей (CSS)” и вставить следующий код самом конце: 

#material-nav {
 display: flex;
 margin: 10px 0;
 justify-content: space-between;
}

#material-nav > div {
 width: 49%;
 text-align: center;
 padding: 0.5em 2em;
 border: transparent;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
 background: dodgerblue;
 color: white;
 border-radius: 20px;
 cursor: pointer;
 font-size: 17px;
 display: flex;
 align-items: center;
 justify-content: center;
}

#material-nav a {
 display: inline-flex;
 width: 100%;
 height: 100%;
 color: inherit;
 text-decoration: none;
 align-items: center;
 justify-content: center;
 position: relative;
}

#material-nav > div:hover {
 background: rgb(2,0,36);
 background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%);
}

#material-nav > div:first-child a::before {
 content: "\2190";
 position: absolute;
 left: -20px;
}

#material-nav div:last-child a::after {
 content: "\2192";
 position: absolute;
 right: -20px;
}

Важно! Для того чтобы увидеть изменения на вашем сайте, не забудьте очистить кеш вашего браузера.

Как изменить можно изменить фоновый цвет кнопки и шрифта на свой? 

#material-nav > div {
…
 background: dodgerblue; /* Здесь указать свое значение для фонового цвета */
 color: white; /* Здесь указать свое значение для цвета шрифта */
…
}

Выбрать и посмотреть hex-коды всех цветов, вы можете на данном сайте.

Как изменить фоновый цвет кнопки при наведении? 

#material-nav > div:hover {
 background: linear-gradient(90deg, rgba(30,144,255,1) 0%, rgba(0,212,255,1) 100%); /* Здесь указать свое значение для градиента */
}

Для создания своего градиента вы можете воспользоваться бесплатным генератором.

Как изменить закругленные углы кнопки?

#material-nav > div {
…
 border-radius: 20px; /* Здесь указать свое значение */
…
}

Как изменить размер шрифта в кнопке?

#material-nav > div {
…
font-size: 17px; /* Здесь указать свое значение */
…
}