Demo: Add button press effect and refactor styles.

blueimp · May 14, 2020 · da05026 · da05026
1 parent b0c5a3a
commit da05026
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/css/demo.css b/css/demo.css
@@ -106,6 +106,22 @@ textarea {
   display: block;
   overflow: auto;
 }
+button {
+  background: #3c76a7;
+  background: linear-gradient(180deg, #3c76a7, #225c8d);
+  border-color: #225c8d;
+  color: #fff;
+}
+button[type='submit'] {
+  background: #6fa349;
+  background: linear-gradient(180deg, #6fa349, #568a30);
+  border-color: #568a30;
+}
+button[type='reset'] {
+  background: #d79435;
+  background: linear-gradient(180deg, #d79435, #be7b1c);
+  border-color: #be7b1c;
+}
 select {
   display: block;
   padding-right: 2.25em;
@@ -116,6 +132,10 @@ select {
   border-color: #225c8d;
   color: #fff;
 }
+button:active,
+select:active {
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
+}
 select::-ms-expand {
   display: none;
 }
@@ -151,6 +171,9 @@ input[type='file']::-webkit-file-upload-button {
   border-radius: 5px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
 }
+input[type='file']::-webkit-file-upload-button:active {
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
+}
 input[type='file']::-ms-browse {
   box-sizing: border-box;
   margin: 0;
@@ -164,6 +187,9 @@ input[type='file']::-ms-browse {
   border-radius: 5px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
 }
+input[type='file']::-ms-browse:active {
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
+}
 
 @media (prefers-color-scheme: light) {
   body {
@@ -195,25 +221,6 @@ input[type='file']::-ms-browse {
   }
 }
 
-#edit {
-  background: #3c76a7;
-  background: linear-gradient(180deg, #3c76a7, #225c8d);
-  border-color: #225c8d;
-  color: #fff;
-}
-#crop {
-  background: #6fa349;
-  background: linear-gradient(180deg, #6fa349, #568a30);
-  border-color: #568a30;
-  color: #fff;
-}
-#cancel {
-  background: #d79435;
-  background: linear-gradient(180deg, #d79435, #be7b1c);
-  border-color: #be7b1c;
-  color: #fff;
-}
-
 #result {
   display: block;
 }

diff --git a/index.html b/index.html
@@ -118,8 +118,8 @@ <h3>Options</h3>
     <h2>Result</h2>
     <p id="actions" style="display: none;">
       <button type="button" id="edit">Edit</button>
-      <button type="button" id="crop">Crop</button>
-      <button type="button" id="cancel">Cancel</button>
+      <button type="submit" id="crop">Crop</button>
+      <button type="reset" id="cancel">Cancel</button>
     </p>
     <figure id="result">
       <figcaption style="display: none;">