Add :active state to large elements

ekaterinburgdev · Dec 21, 2023 · 53a3ad6 · 53a3ad6
1 parent 090a524
commit 53a3ad6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/components/Button/Button.module.css b/components/Button/Button.module.css
@@ -18,12 +18,24 @@
     color: white;
 }
 
+.Button_type-primary:hover {
+    background: #3e3e3e;
+}
+
+.Button_type-primary:active {
+    background: #535353;
+}
+
 .Button_type-secondary {
     background: #ffd400;
     color: black;
 }
 
 .Button_type-secondary:hover {
+    background: #efc700;
+}
+
+.Button_type-secondary:active {
     background: #e1bb00;
 }
 

diff --git a/components/ManualPreview/ManualPreview.module.css b/components/ManualPreview/ManualPreview.module.css
@@ -64,8 +64,15 @@
     object-position: left center;
 }
 
-.manual:hover .manualInner {
-    transform: matrix(1, -0.125, 0, 1, 0, 0) scaleX(0.95);
+@media (hover: hover) {
+    .manual:hover .manualInner {
+        transform: matrix(1, -0.125, 0, 1, 0, 0) scaleX(0.95) translateZ(0);
+    }
+}
+
+.manual:active .manualInner {
+    transform: matrix(1, -0.145, 0, 1, 0, 0) scaleX(0.935) translateZ(0);
+    transition: transform 0.125s ease;
 }
 
 .manualTitle {