MEDIUM: css: Add hover effects on modal & send button

20syldev · Dec 25, 2024 · 1be755c · 1be755c
1 parent dc8725b
commit 1be755c
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/css/index.css b/css/index.css
@@ -3,8 +3,8 @@
 *,
 *::after,
 *::before {
-    padding: 0;
     margin: 0;
+    padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }
@@ -101,6 +101,10 @@ body {
     border-radius: 20px;
     width: fit-content;
     outline: none;
+    transition: 0.5s;
+}
+.modal-input:hover {
+    border: 2px solid #ffffff33;
 }
 .modal-input::placeholder {
     color: white;
@@ -109,16 +113,20 @@ body {
 /* Send button */
 .send {
     position: absolute;
-    background: #819effd3;
+    background: #6387ffee;
     cursor: pointer;
     top: 50%;
     right: 17.5px;
     padding: 5px;
     border: none;
     height: 25px;
     border-radius: 20px;
+    transition: 0.5s;
     transform: translateY(-50%);
 }
+.send:hover {
+    background: #89a4ffd3;
+}
 .send img {
     width: 14px;
     height: auto;