Enhance button hover effects with scaling transitions for improved interactivity

This commit is contained in:
mr. M
2025-03-07 15:29:26 +01:00
parent f9f126a842
commit 124d5e0cdb
2 changed files with 24 additions and 1 deletions

View File

@@ -29,7 +29,7 @@
width: 32px;
height: 32px;
background: light-dark(rgb(24, 24, 24), rgb(231, 231, 231));
transition: background 0.2s ease;
transition: background 0.05s ease, scale 0.05s ease;
border-radius: 999px;
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
@@ -37,6 +37,11 @@
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
scale: 1.05;
}
&:hover:active {
scale: 0.95;
}
& label {

View File

@@ -89,6 +89,7 @@
border-radius: 50%;
cursor: pointer;
position: relative;
transition: transform 0.1s;
&::after {
content: '';
position: absolute;
@@ -99,6 +100,23 @@
outline: 2px solid var(--zen-toolbar-element-bg);
border-radius: 50%;
pointer-events: none;
transition: transform 0.1s;
}
&:hover {
transform: scale(1.05);
&::after {
transform: scale(1.05);
}
}
&:hover:active {
transform: scale(0.95);
&::after {
transform: scale(0.95);
}
}
}
}