Update app.py

app.py

@@ -31,7 +31,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
 
     # Create circles with text enclosed
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="margin-right: -{overlap}px;"></div>'
+        f'<div class="circle {color_class}"></div>'
         for _ in range(num_circles)
     ])
     circles_html += f'<div class="circle-text">{label}</div>'  # Add the text after the circles
@@ -62,7 +62,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
             width: {circle_size}px;
             height: {circle_size}px;
             position: relative;
-            margin-right: {overlap}px; /* Adjust the margin for overlapping effect */
+            margin-right: -{overlap}px; /* Adjust the margin for overlapping effect */
         }}
         .circle-text {{
             position: absolute;
@@ -92,6 +92,10 @@ 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)