Вот скрипты Я использовал ваш серый для активной (нажатой) и желтый для выбранной - на которую навели)
CSS
.btn {
display: inline-block;
border-radius: 12px;
border: none;
padding: 10px 15px;
color: #000000;
cursor: pointer;
}
button {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 1rem;
display: inline-block;
border-radius: 12px;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: 0.25s;
background-color: #ffffff;
}
/* выбранная кнопка - на котоую навели */
:is(.btn, .btn.active):hover {
background-color: yellow;
}
/* активная кнопка - которая была нажата */
.btn.active {
background-color: #d9d9d9;
}
HTML. Для каждой кнопки надо задать свой уникальный id и они должны быть одинаковые на всех страницах. Типа такого
<ul class="menu">
<li>
<form action="/posts/" target="_self">
<button id="b1" class="btn" type="submit">Все посты</button>
</form>
</li>
<li>
<form action="/another/" target="_self">
<button id="b2" class="btn" type="submit">Другой пункт</button>
</form>
</li>
<li>
<form action="/something_else/" target="_self">
<button id="b3" class="btn" type="submit">Еще что то</button>
</form>
</li>
</ul>
На каждую страницу скрипт (прямо на страницу, или через файл подключать)
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.btn');
const activebutid = window.sessionStorage.getItem('activebutton');
let lastactive = activebutid
? document.getElementById(activebutid)
: null;
lastactive?.classList.add('active');
function clickhandler() {
lastactive?.classList.remove('active');
this.classList.add('active');
window.sessionStorage.setItem('activebutton', this.id);
}
for (const but of buttons) {
but.addEventListener('click', clickhandler);
}
});