Add pulsing effect to "run tests" button (#1637)

Author: queengooborg

style.scss

@@ -214,6 +214,19 @@ $colors: (
 
 // End Variables, Functions, Mixins
 
+// Animations
+
+@keyframes pulse-animation {
+  0% {
+    filter: saturate(1) brightness(1);
+  }
+  100% {
+    filter: saturate(1.5) brightness(1.5);
+  }
+}
+
+// End animations
+
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@500&display=swap");
 
 :root {
@@ -315,6 +328,18 @@ input {
     @include themedProperty(background, "input-disabled-bg");
     @include themedProperty(color, "input-placeholder");
   }
+
+  &.pulse {
+    animation-name: pulse-animation;
+    animation-duration: 2s;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+    animation-play-state: running;
+
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
 }
 
 input {

views/tests.ejs

@@ -18,7 +18,7 @@ See the LICENSE file for copyright details
 </form>
 <div id="results">
   <hr />
-  <button id="run">Run Tests</button>
+  <button id="run" class="pulse">Run Tests</button>
 </div>
 
 <% let resourcesToLoad = new Set(); %>