#6: Styled button

Author: piyushk-dev

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 && (

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;
 }