scale button size upon clicking to provide visual feedback

rapi-doc · Sep 28, 2024 · 704565c · 704565c
1 parent bfecc6e
commit 704565c
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/src/styles/input-styles.js b/src/styles/input-styles.js
@@ -15,10 +15,10 @@ export default css`
   white-space: nowrap;
   border: 2px solid var(--primary-color);
   background-color:transparent;
-  transition: background-color 0.2s;
   user-select: none;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition-duration: 0.75s;
 }
 .m-btn.primary {
   background-color: var(--primary-color);
@@ -44,6 +44,11 @@ export default css`
   cursor: not-allowed;
   opacity: 0.4;
 }
+.m-btn:active {
+  filter: brightness(75%);
+  transform: scale(0.95);
+  transition:scale 0s;
+}
 .toolbar-btn {
   cursor: pointer;
   padding: 4px;