Переключатели в горячей теме , когда тема горячая она выводит иконку оранжевую ,
по этому создаем кнопки через css стили цитрусовые анимированные , по кнопке пользователь может сразу попасть на нужную ему страницу.
Код
<style>
.postpSwithces {
display: inline-flex;
gap: 3px; /* чуть меньше расстояние для компактности */
padding: 2px;
font-size: 0; /* скрываем лишний текст, например скобки */
}
/* Маленькие круговые цитрусовые кнопки */
.postPSwithcesLink {
display: inline-flex;
justify-content: center; /* центр цифры горизонтально */
align-items: center; /* центр цифры вертикально */
width: 20px; /* уменьшили размер кнопки */
height: 20px; /* уменьшили размер кнопки */
font-size: 10px; /* немного меньше шрифт */
font-weight: normal;
color: #ffffff; /* цифры белые */
background: linear-gradient(180deg, #ffb84d, #ff8c1a); /* яркий цитрус */
border: 1px solid #e67e22;
border-radius: 50%; /* полностью круглая */
text-decoration: none !important; /* убираем подчёркивание */
line-height: 1;
transition: all 0.25s ease;
box-shadow: 0 2px 3px rgba(0,0,0,0.2),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
/* Наведение — кнопка ещё ярче */
.postPSwithcesLink:hover {
background: linear-gradient(180deg, #ffc966, #ff9c33);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(255, 140, 0, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
text-decoration: none !important;
}
/* Нажатие — кнопка темнеет */
.postPSwithcesLink:active {
background: linear-gradient(180deg, #e6951a, #cc7700);
transform: translateY(1px);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none !important;
}
</style>
