Version 2 3D Button

UoaWDCC · Sep 26, 2024 · a685f87 · a685f87
1 parent a584162
commit a685f87
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/frontend2/components/Home/PastEvents/PastEvent.tsx b/frontend2/components/Home/PastEvents/PastEvent.tsx
@@ -38,9 +38,9 @@ export function PastEvent(
                     <div className={styles.centeredButton}>
                         <Link href="/events" passHref>
                             <Button variant="filled" className={styles.button}>View All Events</Button>
-                            <AspaButton> Click Me! </AspaButton>
                         </Link>
                     </div>
+                    <AspaButton> Click Me! </AspaButton>
                 </Grid.Col>
             </Grid>
         </Container>

diff --git a/frontend2/components/Shared/Event/ASPAButton/AspaButton.module.css b/frontend2/components/Shared/Event/ASPAButton/AspaButton.module.css
@@ -1,4 +1,5 @@
 /* Version 1 3D Button */
+/*
 .testbutton {
     cursor: pointer;
     border: 0;
@@ -21,6 +22,63 @@
     box-shadow: 0 3px 0 #cd8226;
 }
 
+*/
+
+/* Version 2 3D Button */
+.testbutton {
+    cursor: pointer;
+    outline: none;
+    border: 0;
+    vertical-align: middle;
+    text-decoration: none;
+    padding: 1.25em 2em;
+    border: 2px solid #86470c;
+    border-radius: 1vw;
+    transform-style: preserve-3d;
+    background: var(--mantine-color-aspa-orange-5);
+    height: 60px;
+    position: relative;
+    transition: background 0.15s cubic-bezier(0, 0, .6, 1), transform 0.15s cubic-bezier(0, 0, .6, 1);
+
+}
+
+.testbutton::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: #fff2e4;
+    box-shadow: 0 0 0 2px #e5af7e, 0 .625em 0 0 #a9611d;
+    transform: translate3d(0, .75em, -1em);
+    transition: .15s cubic-bezier(0, 0, .6, 1);
+}
+
+.testbutton:hover {
+    background: #e2cdbb;
+    transform: translate(0, .25em);
+}
+
+.testbutton:hover::before {
+    box-shadow: 0 0 0 2px #e5af7e, 0 .625em 0 0 #a9611d;
+    transform: translate3d(0, .5em, -1em);
+}
+
+.testbutton:active {
+    background: #e2cdbb;
+    transform: translate(5px, 5px);
+}
+
+.testbutton:active::before {
+    box-shadow: 0 0 0 2px #e5af7e, 0 .625em 0 0 #a9611d;
+    transform: translate3d(0, 0, -1em);
+
+}
+
 /*
 .testbutton {
     cursor: pointer;