lars/Portfolio-2026
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

transform scale for buttons on hover

Browse Source
This commit is contained in:
sefaria
2026-05-26 23:00:57 +02:00
parent 0521d33193
commit 96ec270ed4
1 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+16 -12
View File
@@ -374,6 +374,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
border: none; border: none;
border-radius: var(--radius-xxl); border-radius: var(--radius-xxl);
text-decoration: none; text-decoration: none;
transition: transform 0.2s ease;
} }
button, .button-primary, .logo { button, .button-primary, .logo {
@@ -404,10 +405,14 @@ button, .button-primary, .logo {
fill: currentColor; fill: currentColor;
} }
button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
text-decoration: none;
transform: scale(1.03);
}
button:hover, .button-primary:hover, .logo:hover { button:hover, .button-primary:hover, .logo:hover {
background: var(--color-button-primary-hover); background: var(--color-button-primary-hover);
color: var(--color-text-button-primary); color: var(--color-text-button-primary);
text-decoration: none;
} }
.button-secondary:hover { .button-secondary:hover {
@@ -415,17 +420,20 @@ button:hover, .button-primary:hover, .logo:hover {
color: var(--color-text-button-secondary-hover); color: var(--color-text-button-secondary-hover);
} }
button:active, .button-primary:active, .button-secondary:active, .logo:active {
box-shadow: var(--shadow-button-active);
text-decoration: none;
transform: scale(1.03);
}
button:active, .button-primary:active, .logo:active { button:active, .button-primary:active, .logo:active {
background: var(--color-button-primary-active); background: var(--color-button-primary-active);
box-shadow: var(--shadow-button-active);
color: var(--color-text-button-primary-active); color: var(--color-text-button-primary-active);
text-decoration: none;
} }
.button-secondary:active { .button-secondary:active {
background: var(--color-button-secondary-active); background: var(--color-button-secondary-active);
color: var(--color-text-button-secondary-active); color: var(--color-text-button-secondary-active);
box-shadow: var(--shadow-button-active);
} }
button:visited, .button-primary:visited, .logo:visited { button:visited, .button-primary:visited, .logo:visited {
@@ -540,6 +548,7 @@ button:visited, .button-primary:visited, .logo:visited {
.menu-button { .menu-button {
background: none; background: none;
color: var(--color-text-button-secondary); color: var(--color-text-button-secondary);
transition: transform 0.2s ease;
} }
.menu-button:hover, .menu-button:hover,
@@ -547,10 +556,8 @@ button:visited, .button-primary:visited, .logo:visited {
.mobile-menu a[aria-current="page"]:hover { .mobile-menu a[aria-current="page"]:hover {
background: var(--color-button-secondary-hover); background: var(--color-button-secondary-hover);
color: var(--color-text-button-seconary-hover); color: var(--color-text-button-seconary-hover);
text-decoration: underline; text-decoration: none;
text-underline-offset: 0.175rem; transform: scale(1.03);
text-decoration-thickness: 0.075rem;
transition: 0.2s;
} }
.menu-button:active, .menu-button:active,
@@ -566,10 +573,7 @@ button:visited, .button-primary:visited, .logo:visited {
.menu-button:active, .menu-button:active,
.desktop-nav a[aria-current="page"]:active, .desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active { .mobile-menu a[aria-current="page"]:active {
text-decoration: underline; text-decoration: none;
text-underline-offset: 0.175rem;
text-decoration-thickness: 0.075rem;
transition: 0.2s;
} }
.desktop-nav-secondary ul { .desktop-nav-secondary ul {