started removal of rounded borders

resources/js/components/SMButton.vue

@@ -154,16 +154,21 @@ a:visited.sm-button,
     font-weight: 800;
     border-width: 2px;
     border-style: solid;
-    border-radius: 24px;
-    transition: background-color 0.1s, color 0.1s;
-    background-color: $secondary-color;
-    border-color: $secondary-color;
+    // border-radius: 24px;
+    // transition: background-color 0.1s, color 0.1s;
+    // background-color: $secondary-color;
+    // border-color: $secondary-color;
     min-width: 7rem;
     text-align: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: transparent;
+    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.1s ease-in-out;
+
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -227,15 +232,16 @@ a:visited.sm-button,
 
     &:hover:not(:disabled) {
         text-decoration: none;
-        color: $secondary-color;
+        background-color: rgba(255, 255, 255, 0.25);
+        box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.2);
     }
 
     &.primary {
-        background-color: $primary-color;
-        border-color: $primary-color;
+        // background-color: $primary-color;
+        // border-color: $primary-color;
 
         &:hover:not(:disabled) {
-            color: $primary-color;
+            // color: $primary-color;
         }
     }
 
@@ -299,10 +305,6 @@ a:visited.sm-button,
         }
     }
 
-    &:hover:not(:disabled) {
-        background-color: #fff;
-    }
-
     ion-icon {
         height: 1.2rem;
         width: 1.2rem;