Update app.py

app.py

@@ -39,9 +39,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
-            <div class="circle-container">
-                {circles_html}
-            </div>
+            {circles_html}
         </div>
     </div>
     <style>
@@ -58,15 +56,13 @@ def cloud_button(label, key=None, color=None, overlap=30):
             position: relative;
             padding: 10px 20px;
         }}
-        .circle-container {{
-            position: relative;
-        }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
             position: relative;
+            margin-right: {overlap}px; /* Adjust the margin for overlapping effect */
         }}
         .circle-text {{
             position: absolute;
@@ -79,7 +75,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
             text-align: center; /* Center the text horizontally and vertically */
         }}
         /* Add this CSS for the hover effect and shadow */
-        .cloud:hover .circle-container {{
+        .cloud:hover .circle {{
             transform: scale(1.1); /* Scale up the circles on hover */
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
         }}
@@ -96,10 +92,6 @@ def cloud_button(label, key=None, color=None, overlap=30):
     """
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
-# Example usage with a specified overlap value
-cloud_button("Short Text", color="1", overlap=30)
-cloud_button("This is a longer piece of text", color="2", overlap=30)
-cloud_button("This is an even longer piece of text to test the cloud button", color="3", overlap=30)