added animate.css

index.html

@@ -37,6 +37,7 @@
     <!-- Third party plugin CSS-->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
         rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="resources/landing-page/css/jquery-bg-slideshow.css">
@@ -176,7 +177,7 @@
             <div class="col-lg-10 align-self-end">
             </div>
             <div class="col-lg-8 align-self-baseline">
-                <button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
+                <button id="switch-theme" class="btn btn-primary btn-xl animate__animated animate__pulse animate__infinite">Click Me!</button>
             </div>
         </div>
     </div>

resources/landing-page/css/custom.css

@@ -2,7 +2,7 @@
     --about: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 0)), var(--main-bg-color);
 }
 
-.bg-primary { 
+.bg-primary {
     background: var(--about) !important;
     background-repeat: repeat, no-repeat;
     background-attachment: fixed, fixed;
@@ -307,23 +307,14 @@ p {
     line-height: 1.2;
 }
 
-@keyframes glowing {
+.animate__animated.animate__pulse {
-    0% {
+    --animate-duration: 1.5s;
-      background-color: var(--button-color);
+}
-      box-shadow: 0 0 5px rgba(var(--accent-color), 0.502);
+
-    }
+.animate__pulse:hover {
-    50% {
+    box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
-      background-color: var(--button-color-hover);
-      box-shadow: 0 0 10px rgba(var(--accent-color));
-    }
-    100% {
-        background-color: var(--button-color);
-        box-shadow: 0 0 5px rgba(var(--accent-color), 0.502)
-    }
-  }
-.click-me-btn {
-    animation: glowing 1300ms infinite;
 }
+
 /* @media (min-width: 992px) {
 .portfolio-box img {
     object-fit: cover;
@@ -341,7 +332,7 @@ p {
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover {
-    background: linear-gradient(0deg, rgba(247,101,184,1) 0%, rgb(21, 95, 165) 100%);
+    background: linear-gradient(0deg, rgba(247, 101, 184, 1) 0%, rgb(21, 95, 165) 100%);
 }
 
 #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover {
@@ -379,39 +370,56 @@ p {
 
 @keyframes fadein {
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-moz-keyframes fadein { /* Firefox */
+
+@-moz-keyframes fadein {
+
+    /* Firefox */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-webkit-keyframes fadein { /* Safari and Chrome */
+
+@-webkit-keyframes fadein {
+
+    /* Safari and Chrome */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
-        opacity:1;
+        opacity: 1;
     }
 }
-@-o-keyframes fadein { /* Opera */
+
+@-o-keyframes fadein {
+
+    /* Opera */
     from {
-        opacity:0;
+        opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
+
 body {
     animation: fadein 2s;
-    -moz-animation: fadein 2s; /* Firefox */
+    -moz-animation: fadein 2s;
-    -webkit-animation: fadein 2s; /* Safari and Chrome */
+    /* Firefox */
-    -o-animation: fadein 2s; /* Opera */
+    -webkit-animation: fadein 2s;
+    /* Safari and Chrome */
+    -o-animation: fadein 2s;
+    /* Opera */
 }