Improve input transitions on hover and focus

outline-color gives a simple drop-shadow effect while minimizing complexity

diff --git a/index.html b/index.html
index 1c63c5bbcefc0fc647761bf1e21d58501df666be..2d03faac4f648c00d8f6bbca761214206d7a70e0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -72,15 +72,18 @@
       padding-block: 6px;
       border-radius: 4px;
       border: 1px solid hsl(216deg 50% 50%);
-      transition: filter 400ms;
+      outline: 1px solid transparent;
+      transition: filter 400ms, border-color 400ms, outline-color 400ms;
 
       &:hover {
+        outline-color: hsl(216deg 70% 75%);
         filter: brightness(105%);
-        transition: filter 200ms;
+        transition: filter 200ms, outline-color 200ms;
       }
 
       &:focus {
-        outline: 1px solid hsl(216deg 50% 50%);
+        outline-color: hsl(216deg 50% 50%);
+        transition: outline-color 200ms;
       }
     }
 
@@ -164,7 +167,7 @@
 
     <label for="rpc">JSON-RPC</label>
     <input id="rpc" name="rpc" type="url" placeholder="https://ethereum.publicnode.com" value="https://ethereum.publicnode.com" required>
-    
+
     <label for="block">Block number (empty value will default to "latest")</label>
     <input id="block" name="block" type="number" placeholder="21392053">