project button modified

GDSC-IIIT-Kalyani · Feb 16, 2023 · e26e2cf · e26e2cf
1 parent 239d092
commit e26e2cf
Showing 1 changed file with 34 additions and 42 deletions.
diff --git a/src/components/projects/project.css b/src/components/projects/project.css
@@ -107,58 +107,50 @@
     border-style: none;
     border-radius: 15px;
     transition: all 0.5s; */
-     background-color: white;
-  border: 2px solid black;
+    align-items: center;
+  appearance: none;
+  background-color: #FCFCFD;
+  border-radius: 4px;
+  border-width: 0;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
   box-sizing: border-box;
-  color: #042042;
-  display: flex;
-  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-  font-size: 1rem;
-  font-weight: 700;
+  color: #36395A;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: "JetBrains Mono",monospace;
+  height: 48px;
   justify-content: center;
-  line-height: 1.75rem;
-  padding: .75rem 1.65rem;
-  /* position: relative; */     
-  text-align: center;
-  width: 100%;
-  max-width: 460px;
+  line-height: 1;
+  list-style: none;
+  overflow: hidden;
+  /* padding-left: 16px;
+  padding-right: 16px; */
+  padding: 3% 8% 3% 8%;
   position: relative;
-  transform: rotate(-2deg);   
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow .15s,transform .15s;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
-  margin-top: 21px;
-   margin-left: auto;
-}
-
-.projects-button :focus {
-  outline: 0;
-}
-
-.projects-button:hover{
-    cursor: pointer;
-}
+  white-space: nowrap;
+  will-change: box-shadow,transform;
+  font-size: calc(1em);
 
-.projects-button:after {
-    content: '';
-  position: absolute;
-  border: 2px solid #fdfcfc;
-  bottom: 4px;
-  left: 4px;
-  width: calc(100% - 1px);
-  height: calc(100% - 1px);
 }
 
-.projects-button:hover:after {
-    bottom: 2px;
-    left: 2px;
+.projects-button:focus {
+    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
   }
-
-  @media (min-width: 768px) {
-    .projects-button {
-      padding: .75rem 3rem;
-      font-size: 1.25rem;
-    }
+
+  .projects-button:hover {
+    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+    transform: translateY(-2px);
+  }
+
+  .projects-button:active {
+    box-shadow: #D6D6E7 0 3px 7px inset;
+    transform: translateY(2px);
   }
 
 @media screen and (max-width: 1200px) {