New Button Design

acf-sack · Jun 26, 2024 · 6430d05 · 6430d05
1 parent a02c346
commit 6430d05
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 18 deletions.
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -1,9 +1,65 @@
 *{
     scroll-behavior: smooth;
+    font-family: 'poppins', sans-serif;
+}
+
+/* Button */
 
+:root {
+    --x : 45deg;
+}
+
+.button-2{
+    position: relative;
+    width: 150px;
+    height: 55px;
+    display: inline-block;
+    border-radius: 5px;
+}
+
+.button-2 .button-i {
+    position: absolute;
+    inset: -2px;
+    display: block;
+    border-radius: 5px;
+}
+
+.button-2 .button-i,
+.button-2 .button-i:nth-child(2) {
+    background: linear-gradient(var(--x), #00ccff,#0e1538,#0e1538,#d400d4);
+}
+.button-2 .button-i:nth-child(2) {
+    filter: blur(10px);
+}
+
+.button-2 .button-s {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    text-transform: uppercase;
+    color: #fff;
+    background: rgba(14, 21, 56, 0.65);
+    letter-spacing: 1px;
+    border: 1px solid #040a29;
+    border-radius: 3px;
+    overflow: hidden;
+    align-items: center;
+}
+.button-2 .button-s::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.075);
+    transform: skew(25deg);
 }
 
-
   #particles-js, #particles-js-contact, #particles-js-comp {
     opacity: 40%;
     position: absolute;
@@ -116,7 +172,7 @@ background-size:cover;
     color: #09051e;
 }
 .main-text{
-    width: 60%;
+    width: 70%;
     position: relative;
     top: -30px;
 }
@@ -294,7 +350,7 @@ scale: 1.0;
     border: solid 2px white;
     border-radius: 10px;
     color: #ffffff;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
 }
 .card-button:hover{

diff --git a/index.html b/index.html
@@ -28,16 +28,14 @@
 
       <div class="buttons-header" data-aos="zoom-in" data-aos-once="true">
 
-              <a href="./competitions.html" class="button-1-link"><button class="button-main button-1">
-                Competitions
-              </button></a>
-
-
-              <a href="#about">
-                <button  class="button-main button-2">
-                  About
-                </button>
-              </a>
+              <a href="./competitions.html" class="button-2">
+                <i class="button-i"></i><i class="button-i"></i>
+                <span class="button-s"><b>Competitions</b></span>
+            </a>
+            <a href="#about" class="button-2">
+              <i class="button-i"></i><i class="button-i"></i>
+              <span class="button-s"><b>About Us</b></span>
+          </a>
 
       </div>
     </center>
@@ -55,11 +53,10 @@
       and e-sports, providing a platform for students to demonstrate their skills and creativity in various tech domains.</div>
       <br>
       <center   data-aos="zoom-in" data-aos-once="true" >
-        <a href="./competitions.html">
-          <button class="button-main">
-            Competitions
-          </button>
-        </a>
+        <a href="./competitions.html" class="button-2">
+          <i class="button-i"></i><i class="button-i"></i>
+          <span class="button-s"><b>Competitions</b></span>
+      </a>
 
       </center><br><br>
      <hr style="color: white;">
@@ -128,6 +125,16 @@ <h1 class="contact-heading"  data-aos="zoom-in" data-aos-once="true">
   <script>
     AOS.init();
   </script>
+  <script>
+    let btns = document.querySelectorAll('a.button-2');
+    btns.forEach(btn => {
+      btn.addEventListener('mousemove', e => {
+        let rect = e.target.getBoundingClientRect();
+        let x = e.clientX - rect.left;
+        btn.style.setProperty('--x', x + 'deg');
+      });
+    });
+  </script>
 <script src="assets/js/script.js"></script>
 <script type="text/javascript" src="assets/js/particles.js"></script>
 <script type="text/javascript" src="assets/js/app.js"></script>