Add 3D crease between screen and buttons for realistic look

src/components/Calculators/BasicCalculator.tsx

@@ -192,6 +192,7 @@ const BasicCalculator = () => {
                 </span>
             </div>
             </div>
+            <div className="crease"></div>
             <div className="basic-keys-container">
                 <div className="top row">
                     <button onClick={setFunction} value="invert" className="operator-key divide">+/-</button>

src/styles/calculator.scss

@@ -21,6 +21,10 @@ button:focus {
     align-items: center;
     -webkit-box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.62);
     box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.62);
+    background-image:
+        radial-gradient(ellipse at 15% 10%, rgba(0, 0, 0, 0.03) 0%, transparent 50%),
+        radial-gradient(ellipse at 85% 95%, rgba(0, 0, 0, 0.04) 0%, transparent 40%),
+        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 70%);
 
     @media screen and (max-width: 416px) {
         width: 100%;
@@ -84,10 +88,14 @@ button:focus {
     > p {
         font-size: 32px;
         font-weight: bold;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
     }
 
     > h4 {
         margin-top: -8px;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: darken($primary-bland, 40%);
     }
 }
 
@@ -133,8 +141,12 @@ button:focus {
     padding: 8px;
     height: 60px;
     border-radius: 4px;
-    background: gray;
+    background: linear-gradient(to bottom, #a8b0a0, #b8c0b0 30%, #c0c8b8 70%, #a8b0a0);
     border: 1px solid $primary_black;
+    box-shadow:
+        inset 0 2px 6px rgba(0, 0, 0, 0.4),
+        inset 0 -1px 2px rgba(0, 0, 0, 0.15),
+        0 1px 0 rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
@@ -149,6 +161,22 @@ button:focus {
     background-color: $primary-bland;
 }
 
+.basic > .crease {
+    width: 100%;
+    height: 12px;
+    background: linear-gradient(
+        to bottom,
+        $primary-bland 0%,
+        darken($primary-bland, 6%) 30%,
+        darken($primary-bland, 8%) 50%,
+        darken($primary-bland, 6%) 70%,
+        $primary-bland 100%
+    );
+    box-shadow:
+        inset 0 4px 6px rgba(0, 0, 0, 0.2),
+        inset 0 -3px 5px rgba(255, 255, 255, 0.1);
+}
+
 .basic > .basic-keys-container {
     background-color: $primary-bland;
     display: flex;
@@ -164,6 +192,14 @@ button:focus {
     > button {
         border-radius: 4px;
         height: 65%;
+
+        &:hover {
+            filter: brightness(1.1);
+        }
+
+        &:active {
+            filter: brightness(0.95);
+        }
     }
 }
 
@@ -176,6 +212,26 @@ button:focus {
     > button {
         flex: 1;
         margin: 4px;
+        box-shadow:
+            0 3px 1px rgba(0, 0, 0, 0.4),
+            0 4px 6px rgba(0, 0, 0, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.15);
+        transition: box-shadow 0.1s ease, transform 0.1s ease;
+
+        &:hover {
+            box-shadow:
+                0 3px 1px rgba(0, 0, 0, 0.45),
+                0 5px 8px rgba(0, 0, 0, 0.25),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+
+        &:active {
+            transform: translateY(2px);
+            box-shadow:
+                0 1px 1px rgba(0, 0, 0, 0.4),
+                0 1px 2px rgba(0, 0, 0, 0.2),
+                inset 0 1px 3px rgba(0, 0, 0, 0.15);
+        }
     }
 }
 
@@ -213,6 +269,27 @@ button:focus {
     transform: skewX(-4deg);
     font-size: 42px;
     flex: 1;
+    box-shadow:
+        0 3px 1px rgba(0, 0, 0, 0.4),
+        0 4px 6px rgba(0, 0, 0, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    transition: box-shadow 0.1s ease, transform 0.1s ease;
+
+    &:hover {
+        box-shadow:
+            0 3px 1px rgba(0, 0, 0, 0.45),
+            0 5px 8px rgba(0, 0, 0, 0.25),
+            inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        brightness: 1.05;
+    }
+
+    &:active {
+        transform: skewX(-4deg) translateY(2px);
+        box-shadow:
+            0 1px 1px rgba(0, 0, 0, 0.4),
+            0 1px 2px rgba(0, 0, 0, 0.2),
+            inset 0 1px 3px rgba(0, 0, 0, 0.15);
+    }
 }
 
 .basic-arithmetic {
@@ -255,6 +332,26 @@ button:focus {
     > button {
         flex: 0.208;
         margin: 4px;
+        box-shadow:
+            0 3px 1px rgba(0, 0, 0, 0.4),
+            0 4px 6px rgba(0, 0, 0, 0.2),
+            inset 0 1px 0 rgba(255, 255, 255, 0.15);
+        transition: box-shadow 0.1s ease, transform 0.1s ease;
+
+        &:hover {
+            box-shadow:
+                0 3px 1px rgba(0, 0, 0, 0.45),
+                0 5px 8px rgba(0, 0, 0, 0.25),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2);
+        }
+
+        &:active {
+            transform: translateY(2px);
+            box-shadow:
+                0 1px 1px rgba(0, 0, 0, 0.4),
+                0 1px 2px rgba(0, 0, 0, 0.2),
+                inset 0 1px 3px rgba(0, 0, 0, 0.15);
+        }
 
         @media screen and (max-width: 412px) {
             flex: 0.225;
@@ -286,3 +383,45 @@ button:focus {
 .red {
     background-color: $primary-power-red;
 }
+
+// Worn text effect for heavily used buttons
+// Overlays a gradient that masks the center of the text to look faded
+
+@mixin worn-overlay($opacity) {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(
+            ellipse at center,
+            $primary_black $opacity,
+            transparent 70%
+        );
+        pointer-events: none;
+    }
+}
+
+// Heavy wear - most used buttons
+.basic-key.clear,
+.basic-key.zero {
+    @include worn-overlay(35%);
+}
+
+// Medium wear
+.basic-key.one,
+.operator-key.plus {
+    @include worn-overlay(25%);
+}
+
+// Light wear
+.basic-key.\35,
+.basic-key.two,
+.operator-key.divide {
+    @include worn-overlay(15%);
+}