styling for login/signup buttons

oslabs-beta · Apr 20, 2023 · e635f17 · e635f17
1 parent fb05f95
commit e635f17
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/client/src/pages/Login.css b/client/src/pages/Login.css
@@ -22,13 +22,13 @@ body {
   position: absolute;
   border-radius: 50%;
 }
-.shape:first-child {
+.shape:last-child {
   background: linear-gradient(#1845ad, #23a2f6);
   left: -80px;
   top: -80px;
 }
-.shape:last-child {
-  background: linear-gradient(to right, #ff512f, #f09819);
+.shape:first-child {
+  background: linear-gradient(to right, #fd3302, #f09819);
   right: -30px;
   bottom: -80px;
 }
@@ -92,10 +92,31 @@ input {
   color: #080710;
   margin-top: 30px;
   background-color: #ffffff;
+  background: linear-gradient(to bottom right, #fd3302, #ff9a5a);
+  transition: box-shadow 0.2s ease-in-out;
 }
-.signup-btn {
+
+.login-btn:not([disabled]):hover {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5),
+    -0.125rem -0.125rem 1rem rgba(239, 71, 101, 0.5),
+    0.125rem 0.125rem 1rem rgba(255, 154, 90, 0.5);
+}
+/* .signup-btn {
   color: #080710;
   background-color: #ffffff;
+  transition: box-shadow 0.2s ease-in-out;
+} */
+.btn-login {
+  color: #080710;
+  margin-top: 30px;
+  background-color: #f7f7f7; /* Adjust the color to make it white-ish */
+  transition: box-shadow 0.2s ease-in-out;
+}
+.btn-login:not([disabled]):hover {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5),
+    -0.125rem -0.125rem 1rem rgba(255, 180, 120, 0.5),
+    /* Adjust the color to make it lightly orange-ish */ 0.125rem 0.125rem 1rem
+      rgba(255, 180, 120, 0.5); /* Adjust the color to make it lightly orange-ish */
 }
 .already-have-account {
   margin-top: 10px;

diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx
@@ -82,7 +82,7 @@ const Login = () => {
         </button>
 
         <Link to='/signup'>
-          <button className='login-btn'>Sign Up</button>
+          <button className='btn-login'>Sign Up</button>
         </Link>
       </form>
     </div>

diff --git a/client/src/pages/Signup.jsx b/client/src/pages/Signup.jsx
@@ -109,7 +109,11 @@ const Signup = () => {
         </button>
 
         <p className='already-have-account'>Already have an account?</p>
-        <button className='signup-btn' onClick={() => navigate('/')}>
+        <button
+          className='btn-login'
+          onClick={() => navigate('/')}
+          style={{ margin: 0 }}
+        >
           LOGIN
         </button>
       </form>