Unify hover animations for filter and sort buttons

This commit is contained in:
Paweł 2025-03-24 22:52:53 +00:00
parent 0796432467
commit bcd03640fb

View file

@ -767,27 +767,10 @@ td {
overflow: hidden;
}
.filter-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 120%;
background: rgba(255, 255, 255, 0.1);
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
transition: transform 0.5s ease;
}
.filter-btn:hover::after {
transform: translate(-50%, -50%) scale(1);
}
.filter-btn:hover {
transform: none;
box-shadow: none;
background: var(--smoke);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: rgba(236, 55, 80, 0.1);
}
.filter-btn.active {
@ -803,23 +786,9 @@ td {
transition: all 0.3s ease;
}
.filter-btn.user-filter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.filter-btn.user-filter:hover::before {
transform: translateX(100%);
.filter-btn.user-filter:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(236, 55, 80, 0.15);
}
.category-section.hidden {
@ -1867,6 +1836,7 @@ body.modal-open {
.filter-btn:hover, .sort-btn:hover {
background: rgba(236, 55, 80, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(236, 55, 80, 0.15);
}
.filter-btn.active, .sort-btn.active {