button style

programmieren/spiele/Flappy-Witch/index.html

@@ -39,8 +39,8 @@
 
         .loading .loader-container { display: flex; }
 
-        /* Button-Stile */
+        /* Button-Style */
-        .button {
+        .button-share {
             --white: #fff;
             cursor: pointer;
             background: linear-gradient(to bottom, #6e3bff, #7e51ff);
@@ -58,6 +58,33 @@
             margin-top: 20px;
         }
 
+        .button {
+            padding: 16px 32px; /* Doppelte Größe */
+            border-radius: 8px;
+            background: linear-gradient(to bottom, #007bff, #0056b3); /* Blau */
+            box-shadow: 0 2px 4px rgba(0,0,0,0.7);
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 20px; /* Abstand zum oberen Inhalt */
+        }
+
+        .button:hover {
+            box-shadow: 0 4px 8px rgba(0,0,0,0.6);
+        }
+
+        .button:active {
+            box-shadow: 0 0px 1px rgba(0,0,0,0.8);
+            transform: scale(0.995);
+        }
+
+        .button-text {
+            font-weight: 600;
+            color: white;
+            font-size: 1.5em; /* Textgröße anpassen */
+        }
+
         .icon path.bm {
             stroke-dasharray: 3;
             stroke-dashoffset: 3;
@@ -221,56 +248,16 @@
     <br/>
     <div align='center'>
         <!-- Spielen-Button -->
-        <style>
+            <button class="button" onclick="window.location.href=`/programmieren/spiele/Flappy-Witch/FlappyWitch.html`>
-            /* Stil für den Button mit eindeutiger Klasse */
-            .unique-button {
-                transform: scale(2);
-                background: linear-gradient(to bottom, #606060, #505050); /* Grau Hintergrund */
-                border-radius: 12px;
-                padding: 4px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
-                transition: all 200ms;
-            }
-            
-            .unique-button:hover {
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
-            }
-            
-            .unique-button:active {
-                box-shadow: 0 0px 1px rgba(0, 0, 0, 0.8);
-                transform: scale(0.995);
-            }
-            
-            /* Stil für den inneren Button-Text */
-            .unique-button .button-inner {
-                background: linear-gradient(to bottom, #0000FF, #0000CD); /* Blau Hintergrund für den inneren Bereich */
-                border-radius: 8px;
-                padding: 10px 20px;
-            }
-            
-            .unique-button .button-text {
-                color: white;
-                font-size: 16px;
-                font-weight: bold;
-            }
-            </style>
-            
-            <div class="flex justify-center items-center gap-12 h-full">
-              <div class="bg-gradient-to-b from-gray-800/40 to-transparent p-[4px] rounded-[16px]">
-                <button class="unique-button" onclick="window.location.href='/programmieren/spiele/Flappy-Witch/FlappyWitch.html'">
                 <div class="button-inner">
-                    <span class="button-text">Get Started</span>
+                    <span class="button-text">Play</span>
                 </div>
             </button>
-              </div>
-            </div>
-            
-            </button>
         
         </a>
         <br/><br/>
         <!-- Neuer Teilen-Button -->
-        <button class="button" onclick="openSharePopup()">
+        <button class="button-share" onclick="openSharePopup()">
             <div class="icon-container">
                 <svg viewBox="0 0 24 24" fill="none" class="icon">
                     <!-- Teilen-Icon -->