From 1fb0468453a3ba8c066cca24bd6ce2a5055a50a3 Mon Sep 17 00:00:00 2001
From: E V I R A L <74889213+Teameviral@users.noreply.github.com>
Date: Mon, 26 Jun 2023 13:46:50 +0530
Subject: [PATCH] Create 3dbutton.css

---
 assets/css/3dbutton.css | 77 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 assets/css/3dbutton.css

diff --git a/assets/css/3dbutton.css b/assets/css/3dbutton.css
new file mode 100644
index 000000000..6d3a01c8c
--- /dev/null
+++ b/assets/css/3dbutton.css
@@ -0,0 +1,77 @@
+/* Button container */
+.button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60px; /* Adjust the height to fit your needs */
+    gap: 10px; /* Adjust the gap between buttons */
+  }
+  
+  /* Button */
+  .button {
+    position: relative;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    cursor: pointer;
+    overflow: hidden;
+    padding: 10px 20px; /* Adjust the padding to increase button length */
+  }
+  
+  /* Hire Me Button */
+  .hire-me-button {
+    background-color: green;
+    color: white;
+  }
+  
+  /* View My Resume Button */
+  .view-resume-button {
+    background-color: orange;
+    color: white;
+  }
+  
+  /* Button text */
+  .button-text {
+    position: relative;
+    z-index: 2;
+    font-size: 16px;
+    text-align: center;
+    font-weight: bold;
+    transition: transform 0.5s;
+    font-family: Lora, serif; /* Set the font family to Lora */
+  }
+  
+  /* Button hover state */
+  .button:hover .button-text {
+    transform: translateY(-50%);
+  }
+  
+  /* Button click state */
+  .button:active .button-text {
+    transform: translateY(0);
+  }
+  
+  /* Button link */
+  .button-link {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    opacity: 0;
+    z-index: 1;
+  }
+  
+  /* Button hover state for link */
+  .button:hover .button-link {
+    opacity: 1;
+  }
+  
+  /* Button logo (Hire Me) */
+  .button-logo {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px; /* Adjust the spacing between the logo and text */
+  }
+