Merge pull request Anjaliavv51#79 from PCoder23/button-enhance

Added hover effects on button
2004shweta · Oct 19, 2023 · f260ffd · f260ffd
2 parents ba5325f + 2836b88
commit f260ffd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/components/Contact-section/ContactForm.jsx b/src/components/Contact-section/ContactForm.jsx
@@ -15,9 +15,15 @@ const ContactForm = () => {
             className="flex gap-x-12 justify-center md:justify-start"
             style={{ height: "min-content", alignItems: "baseline" }}
           >
-            <a href="https://twitter.com/gauravsingh1281"><img src={Twitter} alt="Twitter-logo" className="h-14" /></a>
-            <a href="https://github.com/gauravsingh1281"><img src={Github} alt="Github-logo" className="h-14" /></a>
-            <a href="https://www.instagram.com/gauravsingh1281"><img src={Insta} alt="Insta-logo" className="h-14" /></a>
+            <a href="https://twitter.com/gauravsingh1281">
+              <img src={Twitter} alt="Twitter-logo" className="h-14" />
+            </a>
+            <a href="https://github.com/gauravsingh1281">
+              <img src={Github} alt="Github-logo" className="h-14" />
+            </a>
+            <a href="https://www.instagram.com/gauravsingh1281">
+              <img src={Insta} alt="Insta-logo" className="h-14" />
+            </a>
           </div>
         </article>
         {/* Right hand side of the form */}
@@ -27,7 +33,7 @@ const ContactForm = () => {
               <input
                 className="border-2 border-green rounded-lg text-green-dark h-16 md:w-6/12 mb-6 md:mb-0 placeholder-textBlack p-2"
                 placeholder="First name"
-                style={{marginRight: "5px"}}
+                style={{ marginRight: "5px" }}
               />
               <input
                 className="border-2 border-green rounded-lg h-16 md:w-6/12 text-green-dark  placeholder-textBlack p-2"
@@ -46,12 +52,12 @@ const ContactForm = () => {
               placeholder="Your message here"
             />
             <div className="flex justify-center md:justify-start ">
-              <button
-                className="bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat"
+              <div
+                className="relative flex cursor-pointer items-center justify-center bg-green rounded-lg w-40 lg:w-60 p-3 text-textWhite text-2xl md:text-xl font-bold font-monsterrat ease-in-out duration-300 hover:bg-[transparent] hover:text-green hover:border-green hover:border-[2px]"
                 type="submit"
               >
                 Submit
-              </button>
+              </div>
             </div>
           </form>
         </article>

diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css
@@ -13,6 +13,11 @@
   font-weight: 600;
   font-size: 18.5px;
   color: #262626;
+  transition: ease 200ms;
+}
+
+.header-section li:hover {
+  color: #1abc9c;
 }
 
 .user-cta :last-child {
@@ -53,9 +58,17 @@
   width: 22%;
   height: 52px;
   background: #1abc9c;
+  transition: ease-in-out 0.3s;
+}
+
+.btn:hover {
+  background: transparent;
+  border-color: #1abc9c;
+  border-width: 2px;
+  color: #1abc9c;
 }
 
-@media (max-width:768px) {
+@media (max-width: 768px) {
   .header-section {
     width: 100%;
     height: 1024px;
@@ -90,7 +103,7 @@
   }
 }
 
-@media (max-width:580px) {
+@media (max-width: 580px) {
   .navbar .logo {
     width: 170px;
   }
@@ -118,7 +131,7 @@
   }
 }
 
-@media (max-width:468px) {
+@media (max-width: 468px) {
   .btn {
     margin-top: 55px;
     border-radius: 8px;