Update app.py

app.py

@@ -31,15 +31,17 @@ 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
 
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
-            {circles_html}
+            <div class="circle-container">
+                {circles_html}
+            </div>
+            <div class="circle-text">{label}</div> <!-- Text goes here -->
         </div>
     </div>
     <style>
@@ -56,26 +58,45 @@ def cloud_button(label, key=None, color=None, overlap=30):
             position: relative;
             padding: 10px 20px;
         }}
+        .circle-container {{
+            position: relative;
+            z-index: 1;
+        }}
         .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 */
+            position: absolute;
+            margin-right: -{overlap}px; /* Adjust the margin for overlapping effect */
         }}
         .circle-text {{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-weight: bold;
+            position: relative;
             z-index: 2;
             white-space: nowrap;  /* Prevent line breaks */
             text-align: center; /* Center the text horizontally and vertically */
+            font-weight: bold;
+        }}
+        .cloud::before,
+        .cloud::after {{
+            content: '';
+            background-color: #FF6347;
+            border-radius: 50%;
+            width: {circle_size * 2}px;
+            height: {circle_size * 2}px;
+            position: absolute;
+            z-index: 0;
+        }}
+        .cloud::before {{
+            left: -{circle_size}px;
+            top: -{circle_size}px;
+        }}
+        .cloud::after {{
+            right: -{circle_size}px;
+            top: -{circle_size}px;
         }}
         /* Add this CSS for the hover effect and shadow */
-        .cloud:hover .circle {{
+        .cloud:hover .circle-container {{
             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 */
         }}