mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-17 07:16:16 +00:00
Enhance button hover effects with scaling transitions for improved interactivity
This commit is contained in:
@@ -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 {
|
||||
|
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user