Update pages/Data_Collection.py

pages/Data_Collection.py

@@ -22,6 +22,31 @@ custom_css = """
     p {
         color: #FFFFFF; /* White text for paragraphs */
     }
+    .stButton>button {
+        background-color: #4CAF50; /* Green */
+        color: white;
+        padding: 10px 24px;
+        border: none;
+        border-radius: 5px;
+        text-align: center;
+        font-size: 16px;
+        margin: 4px 2px;
+        transition-duration: 0.4s;
+        cursor: pointer;
+    }
+    .stButton>button:hover {
+        background-color: #45a049; /* Darker Green on hover */
+        color: white;
+    }
+    .stButton>div:nth-child(1)>button {
+        background-color: #2196F3; /* Blue */
+    }
+    .stButton>div:nth-child(2)>button {
+        background-color: #f44336; /* Red */
+    }
+    .stButton>div:nth-child(3)>button {
+        background-color: #FF9800; /* Orange */
+    }
 </style>
 """
 
@@ -65,20 +90,20 @@ st.markdown(
 )
 
 # Add buttons for each data type
-if st.button("<h3 style='text-align: left; color: Black;'>🗂️Semi-Structured data </h3>"):
+if st.button("Learn More About Structured Data"):
     st.markdown(
-        "<p style='font-size: 16px; color: Black;'>Structured data is stored in a well-defined schema, such as tables or databases. Common examples include Excel files, CSV files, and SQL databases.</p>", 
+        "<p style='font-size: 16px; color: White;'>Structured data is stored in a well-defined schema, such as tables or databases. Common examples include Excel files, CSV files, and SQL databases.</p>", 
         unsafe_allow_html=True
     )
 
 if st.button("Learn More About Unstructured Data"):
     st.markdown(
-        "<p style='font-size: 16px; color: Black;'>Unstructured data includes multimedia files, text documents, and other formats that lack a predefined schema. Examples are images, videos, and free-text files.</p>", 
+        "<p style='font-size: 16px; color: White;'>Unstructured data includes multimedia files, text documents, and other formats that lack a predefined schema. Examples are images, videos, and free-text files.</p>", 
         unsafe_allow_html=True
     )
 
 if st.button("Learn More About Semi-Structured Data"):
     st.markdown(
-        "<p style='font-size: 16px; color: Black;'>Semi-structured data lies between structured and unstructured data. Formats like JSON, XML, and YAML are common examples of semi-structured data.</p>", 
+        "<p style='font-size: 16px; color: White;'>Semi-structured data lies between structured and unstructured data. Formats like JSON, XML, and YAML are common examples of semi-structured data.</p>", 
         unsafe_allow_html=True
     )