Update style.css

style.css

@@ -138,32 +138,70 @@ body {
 
 /* Swap Button */
 #swap-btn {
-    color: #000; /* Warna hitam untuk simbol swap */
+    background-color: #004d00;
+    color: white;
     cursor: pointer;
-    border-radius: 50%; /* Membuat tombol swap berbentuk bulat */
-    border: 2px solid #000; /* Border hitam untuk tombol */
-    font-size: 30px; /* Ukuran lebih besar untuk tampilan web */
+    border-radius: 50%;
+    border: none;
+    font-size: 30px; /* Lebih besar untuk web */
     height: 70px; /* Ukuran lebih besar */
     width: 70px; /* Ukuran lebih besar */
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 30px auto;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan */
     font-weight: bold;
-    transition: transform 0.3s ease; /* Menghapus background dan efek hover */
 }
 
-/* Mode Web dan Tablet */
-@media screen and (min-width: 769px) {
-    #swap-btn {
-        transform: rotate(180deg); /* Rotasi horizontal saat tampilan desktop */
-    }
+#swap-btn:hover {
+    background-color: #003300;
+    transform: rotate(180deg);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Efek bayangan lebih kuat saat hover */
 }
 
 /* Mode Mobile */
 @media screen and (max-width: 768px) {
+    .currency-select {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 15px;
+    }
+
     #swap-btn {
-        transform: rotate(0deg); /* Tidak ada rotasi pada tampilan mobile */
+        transform: rotate(90deg); /* Rotasi tombol swap */
+        width: 60px;
+        height: 60px;
+        margin: 0;
+    }
+
+    .currency-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+/* Mode Web dan Tablet */
+@media screen and (min-width: 769px) {
+    .currency-select {
+        flex-direction: row;
+        align-items: center;
+        gap: 25px;
+    }
+
+    #swap-btn {
+        transform: rotate(0deg); /* Pastikan tombol swap tetap horizontal */
+        width: 70px; /* Ukuran lebih besar */
+        height: 70px; /* Ukuran lebih besar */
+    }
+
+    .currency-group {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
     }
 }