Merge pull request #24 from pulkit-sachdeva-dev/pulkit_sachdeva_footer

Subscribe Button Issue Resolved

Author: Satyam-Godara

public/index.html

@@ -250,7 +250,7 @@ <h3 class="footer__title">Support</h3>
             <div class="footer__content">
                 <form action="" class="footer__form">
                     <input type="email" placeholder="Email" class="footer__input">
-                    <button class="button button--flex"><i class="ri-send-plane-line button__icon"></i> Subscribe</button>
+                    <button class="button button--flex myButton"><i class="ri-send-plane-line button__icon"></i> Subscribe</button>
                 </form>
                 <div class="footer__social">
                     <a href="https://www.facebook.com/" target="_blank" class="footer__social-link"><i class="ri-facebook-fill"></i></a>

public/try2.css

@@ -1,4 +1,3 @@
-
 /*=============== GOOGLE FONTS ===============*/
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
 
@@ -839,6 +838,21 @@ margin-left:50px ;
 .footer__copy { margin-top: 5rem; text-align: center; }
 .footer__copy-link { font-size: var(--smaller-font-size); color: var(--text-color-light); }
 
+/* Find and replace the existing footer button styles with these */
+.footer__button {
+    background-color: var(--container-color);
+    color: var(--white-color);
+    padding: .5rem .75rem;
+    font-size: var(--normal-font-size);
+    border-radius: .5rem;
+    transition: all 0.3s ease;
+}
+
+.footer__button:hover {
+    background-color: var(--white-color);
+    color: #4ed4c6;
+}
+
 /*=============== SCROLL UP ===============*/
 .scrollup { position: fixed; right: 1rem; bottom: -20%; display: flex; background-color: var(--container-color); border-radius: .25rem; padding: .45rem; opacity: .9; z-index: var(--z-tooltip); transition: .4s; }
 .scrollup:hover { background-color: var(--black-color); opacity: 1; }
@@ -966,4 +980,9 @@ margin-left:50px ;
 
 @media screen and (min-width: 576px) {
   .login__form-container { max-width: 450px; padding: 2.5rem; }
+}
+
+
+.myButton:hover {
+    color: #4ed4c6;
 }