iiitl#6: Styled button

piyushkumar079 · Mar 16, 2024 · 72d0ac0 · 72d0ac0
1 parent 50a9b8b
commit 72d0ac0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
@@ -20,7 +20,7 @@ const Navbar = () => {
           {user && (
             <div>
               <span>{user.email}</span>
-              <button onClick={handleClick}>Log out</button>
+              <button onClick={handleClick} className="custom-button">Log out</button>
             </div>
           )}
           {!user && (

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -119,4 +119,18 @@ form.signup, form.login {
   padding: 20px;
   background: #fff;
   border-radius: 4px;
+}
+
+.custom-button{
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #4CAF50;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+.custom-button:hover{
+  background-color: #36803a;
 }