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

@@ -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);
-    }
-    50% {
-      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)
 }
+
+.animate__pulse:hover {
+    box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
 }
-.click-me-btn {
+
-    animation: glowing 1300ms infinite;
-}
 /* @media (min-width: 992px) {
 .portfolio-box img {
     object-fit: cover;
@@ -381,37 +372,54 @@ p {
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
-@-moz-keyframes fadein { /* Firefox */
+
+@-moz-keyframes fadein {
+
+    /* Firefox */
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
-@-webkit-keyframes fadein { /* Safari and Chrome */
+
+@-webkit-keyframes fadein {
+
+    /* Safari and Chrome */
     from {
         opacity: 0;
     }
+
     to {
         opacity: 1;
     }
 }
-@-o-keyframes fadein { /* Opera */
+
+@-o-keyframes fadein {
+
+    /* Opera */
     from {
         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 */
 }