Update app.py

app.py

@@ -34,6 +34,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
         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;">
@@ -41,7 +42,6 @@ def cloud_button(label, key=None, color=None, overlap=30):
             <div class="circle-container">
                 {circles_html}
             </div>
-            <div class="circle-text">{label}</div> <!-- Text goes here -->
         </div>
     </div>
     <style>
@@ -60,40 +60,24 @@ def cloud_button(label, key=None, color=None, overlap=30):
         }}
         .circle-container {{
             position: relative;
-            z-index: 1;
         }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
-            position: absolute;
+            position: relative;
             margin-right: -{overlap}px; /* Adjust the margin for overlapping effect */
         }}
         .circle-text {{
-            position: relative;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-weight: bold;
             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-container {{