💅 style(btn): hover animation

Snigdha-OS · Nov 7, 2024 · 5b57242 · 5b57242
1 parent 9284934
commit 5b57242
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -62,15 +62,15 @@ <h2>Be Silent, When It Is Time To Hear!</h2><br>
                     Designed to be efficient in its use of system resources, making it ideal for older hardware or devices with limited resources. 
                     Emphasizes minimalism and user-centric design, and it also focuses on penetration testing.
                 </p>
-                <div class="cta-buttons">
-                    <a href="#" class="btn btn-primary">
+                <div class="cta-buttons" align="center">
+                    <a href="#" class="btn glow-on-hover">
                         Download
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
                             <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383"/>
                             <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
                         </svg>
                     </a>
-                    <a href="#documentation" class="btn btn-secondary">
+                    <a href="#documentation" class="btn glow-on-hover">
                         Documentation
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
                             <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5"/>
@@ -117,7 +117,7 @@ <h2 class="section-title">All the tools you need</h2>
             <img src="/placeholder.svg?height=64&width=64" alt="Maltego" class="tool-icon">
             <img src="/placeholder.svg?height=64&width=64" alt="Hashcat" class="tool-icon">
         </div>
-        <a href="#tools" class="btn btn-secondary">Find out all about Kali's Tools</a>
+        <a href="#tools" class="btn glow-on-hover">Find out all about Kali's Tools</a>
     </section>
 
     <section class="kali-everywhere">

diff --git a/style.css b/style.css
@@ -16,6 +16,7 @@ body {
     background-color: var(--dark-blue);
     color: white;
     line-height: 1.6;
+    justify-content: center;
 }
 
 .navbar {
@@ -66,7 +67,7 @@ a {
     text-decoration: none;
     font-size: 0.9rem;
     text-transform: uppercase;
-    font-weight: 500;
+    font-weight: 800;
 }
 
 .hero {
@@ -114,6 +115,66 @@ a {
     gap: 1rem;
 }
 
+.glow-on-hover {
+    width: 220px;
+    height: 50px;
+    border: none;
+    outline: none;
+    color: #fff;
+    background: #111;
+    cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 10px;
+}
+
+.glow-on-hover:before {
+    content: '';
+    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+    position: absolute;
+    top: -2px;
+    left:-2px;
+    background-size: 400%;
+    z-index: -1;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+}
+
+.glow-on-hover:active {
+    color: #000
+}
+
+.glow-on-hover:active:after {
+    background: transparent;
+}
+
+.glow-on-hover:hover:before {
+    opacity: 1;
+}
+
+.glow-on-hover:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
 .btn {
     padding: 0.8rem 1.5rem;
     border-radius: 4px;