New effects, refactor

assets/sass/pages/button-generator.scss

@@ -75,7 +75,6 @@
       );
       z-index: 90;
     }
-    
 
     &::before {
       content: "";
@@ -203,7 +202,7 @@
     }
 
     label {
-      display: block;
+      //display: block;
       margin-top: 0.75rem;
       margin-bottom: 0.25rem;
       font-weight: 500;
@@ -438,6 +437,7 @@
     input[type="checkbox"] {
       margin: 0;
       cursor: pointer;
+      margin-right: 0.25em;
     }
 
     span {
@@ -535,4 +535,45 @@
       transform: translateY(0);
     }
   }
+
+  // Custom tooltip styles
+  .control-tooltip {
+    position: fixed;
+    background: linear-gradient(
+      135deg,
+      rgba(0, 120, 200, 0.98) 0%,
+      rgba(0, 100, 180, 0.98) 100%
+    );
+    color: #fff;
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    pointer-events: none;
+    z-index: 10000;
+    max-width: 250px;
+    box-shadow:
+      0 0 20px rgba(0, 150, 255, 0.5),
+      0 4px 12px rgba(0, 0, 0, 0.4),
+      inset 0 0 20px rgba(0, 150, 255, 0.1);
+    border: 1px solid rgba(0, 150, 255, 0.6);
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    line-height: 1.4;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+
+    &.visible {
+      opacity: 1;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6px solid transparent;
+      border-bottom-color: rgba(0, 120, 200, 0.98);
+      filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.2));
+    }
+  }
 }