Минута заКоледа Минута за Коледа * { margin: 0; padding: 0; box-sizing: border-box; } /* Basic body styling */ body { font-family: sans-serif; background-color: #acafb5; } /* Container to isolate button styling */ .menu-button-container { position: relative; width: 100%; height: 100%; } .wrapper { height: 60px; width: 130px; background-color: #3760C9; position: absolute; top: 160%; /* Adjusted to move up */ left: 250%; /* Adjusted to move right */ transform: translate(-50%, -50%); margin-bottom: 30px; display: flex; justify-content: center; z-index: 1; opacity: 0; transition: opacity 0.5s; } .lid { position: absolute; top: 0; left: 15px; transform: translateX(-50%); border-right: 65px solid transparent; border-bottom: 50px solid transparent; border-left: 65px solid transparent; transform-origin: top; transition: transform 0.25s linear; } .lid.one { border-top: 50px solid #658ced; transform: rotateX(0deg); z-index: 3; transition-delay: 0.75s; } .lid.two { border-top: 50px solid #3760C9; transform: rotateX(90deg); z-index: 1; transition-delay: 0.5s; margin-left: -15px; } .envelope { position: absolute; height: 75%; width: 100%; top: 0; left: 0; border-top: 40px solid transparent; border-right: 55px solid #C4DFF0; border-bottom: 20px solid #C4DFF0; border-left: 55px solid #a4d4f2; z-index: 3; } .letter { position: absolute; width: 80%; height: 80px; background-color: white; border-radius: 10px; z-index: 2; overflow: hidden; transition: 0.5s; } .letter p { text-align: center; font-size: 15px; margin-top: 15px; color: #777; opacity: 1; z-index: 4; } .text { position: absolute; top: 50%; /* Adjusted to move up */ left: 250%; /* Adjusted to move right */ font-size: 18px; font-weight: 22px; color: #777; line-height: 17px; white-space: nowrap; transform: translate(-50%, -50%); z-index: 2; transition: opacity 0.5s; } .text:hover { opacity: 0; transition: opacity 0.5s; } .text:hover+.wrapper { opacity: 1; } .text:hover+.wrapper .lid.one { transform: rotateX(90deg); transition-delay: 0s; } .text:hover+.wrapper .lid.two { transform: rotateX(180deg); transition-delay: 0.25s; } .text:hover+.wrapper .letter { transform: translateY(-25px); }