Bug somewhere

static/css/main.css

@@ -2582,6 +2582,56 @@ button:disabled,
   transform: scale(1.05);
 }
 
+.button-stack {
+  display: flex;
+  flex-direction: column-reverse;
+  position: relative;
+  margin: 50px auto;
+  align-items: center;
+}
+
+.stacked-button {
+  all: unset;
+  position: absolute; /* Absolut position for overlap */
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  width: 100px; /* Standardbredde */
+  height: 50px; /* Standardhøjde */
+  background-color: transparent;
+  cursor: pointer;
+  transition: transform 0.3s ease, z-index 0.3s ease;
+}
+.stacked-button:hover {
+  transform: translate(-50%, -50%) scale(1.1); /* Zoom ved hover */
+  z-index: 10; /* Hover sætter knappen øverst */
+}
+
+.stacked-button:nth-child(1) {
+  z-index: 100; /* Højeste z-index for at sikre, at den altid ligger øverst */
+  transform: translate(-50%, -50%) scale(1.2); /* Gør knappen lidt større */
+}
+
+.stacked-button:nth-child(2) {
+  transform: translate(-50%, -60%) rotate(-15deg);
+  z-index: 2;
+}
+
+.stacked-button:nth-child(3) {
+  transform: translate(-50%, -50%) rotate(10deg);
+  z-index: 3;
+}
+
+.stacked-button:nth-child(4) {
+  transform: translate(-50%, -40%) rotate(-10deg);
+  z-index: 4;
+}
+
+.stacked-button:nth-child(5) {
+  transform: translate(-50%, -30%) rotate(15deg);
+  z-index: 5;
+}
+
 /* Wrapper */
 #wrapper {
   display: -moz-flex;

static/sass/components/_modals.scss

@@ -126,3 +126,59 @@ $button-color: #000;
     transform: scale(1.05);
   }
 }
+
+// Container til stablede knapper (reverseret)
+.button-stack {
+  display: flex;
+  flex-direction: column-reverse; // Reverserer rækkefølgen af knapperne
+  position: relative;
+  margin: 50px auto;
+  align-items: center; // Centrer knapperne horisontalt
+}
+
+
+// Knapper
+.stacked-button {
+  all: unset; // Fjerner globale knap-styles
+  position: absolute; /* Absolut position for overlap */
+  top: 50%;
+  left: 50%;
+  transform-origin: center;
+  width: 100px; /* Standardbredde */
+  height: 50px; /* Standardhøjde */
+  background-color: transparent; // Ingen baggrundsfarve
+  cursor: pointer;
+  transition: transform 0.3s ease, z-index 0.3s ease;
+
+  &:hover {
+    transform: translate(-50%, -50%) scale(1.1); /* Zoom ved hover */
+    z-index: 10; /* Hover sætter knappen øverst */
+  }
+}
+
+// Første knap (knap0): Altid øverst
+.stacked-button:nth-child(1) {
+  z-index: 100; /* Højeste z-index for at sikre, at den altid ligger øverst */
+  transform: translate(-50%, -50%) scale(1.2); /* Gør knappen lidt større */
+}
+
+// Rotation og position for de andre knapper
+.stacked-button:nth-child(2) {
+  transform: translate(-50%, -60%) rotate(-15deg);
+  z-index: 2;
+}
+
+.stacked-button:nth-child(3) {
+  transform: translate(-50%, -50%) rotate(10deg);
+  z-index: 3;
+}
+
+.stacked-button:nth-child(4) {
+  transform: translate(-50%, -40%) rotate(-10deg);
+  z-index: 4;
+}
+
+.stacked-button:nth-child(5) {
+  transform: translate(-50%, -30%) rotate(15deg);
+  z-index: 5;
+}