Enhanced Explore Calculators button (#1098)

Rakesh9100 · Jun 10, 2024 · 6c50022 · 6c50022
1 parent 9fd604e
commit 6c50022
Showing 1 changed file with 56 additions and 11 deletions.
diff --git a/style.css b/style.css
@@ -243,7 +243,7 @@ nav ul {
 }
 
 .logo:hover {
-    color: #ff1b82;;
+    color: #ff1b82;
 }
 
 .hamburger {
@@ -301,19 +301,64 @@ section {
 .comp-section .compcontainer .started {
     font-size: 20px;
     font-weight: 700;
-    border: none;
     margin-top: 21px;
-    padding: 10px 45px;
-    border-radius: 18px;
-    color: #ffffff;
-    background: var(--primary);
+    padding: 15px 50px;
+    border: none;
+    outline: none;
+    color: white;
     cursor: pointer;
+    position: relative;
+    z-index: 0;
+    border-radius: 25px;
     transition: 0.5s ease-in-out;
+    background: #fff; /* Ensure the button background is visible */
+    box-shadow: 0 0 0 4px transparent; /* Set up for glow effect */
+}
+
+.comp-section .compcontainer .started::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    background: linear-gradient(45deg, #FF0000, #FF7300, #00FFD5, #FF00C8, #FF0000);
+    background-size: 600%;
+    z-index: -1;
+    filter: blur(8px);
+    animation: glowing 20s linear infinite;
+    border-radius: 27px; /* Slightly larger than button for glow effect */
+    opacity: 1; /* Keep the border glowing continuously */
+}
+
+@keyframes glowing {
+    0% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 400% 0;
+    }
+
+    100% {
+        background-position: 0 0;
+    }
 }
 
 .comp-section .compcontainer .started:hover {
-    transform: scale(1.02);
-    background: #ff6984;
+    background: linear-gradient(45deg, #FF0000, #FF7300, #00FFD5, #FF00C8, #580d0d);
+    background-size: 600%;
+    color: #fff; /* Change text color for better visibility */
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Add glow effect around button */
+    animation: glowing 20s linear infinite;
+}
+
+.comp-section .compcontainer .started:hover::before {
+    filter: blur(15px); /* Enhance the glow effect */
+}
+
+.comp-section .compcontainer .started:active {
+    transform: scale(0.95); /* Scale down on click for effect */
 }
 
 .paragraph {
@@ -1729,14 +1774,14 @@ section {
         height: 40px;
         width: 40px;
     }
-    
+
     #progress-value {
         height: calc(100%-12px);
         width: calc(100%-12px);
         font-size: 23px;
     }
-    
+
     .footer-basic .social {
         padding-bottom: 15px;
     }
- }
+}