Как исправить, что кнопка не появляется? ⇐ CSS

[Anonymous]

Сейчас я создаю приложение с помощью qwik js, и у меня есть код для кнопки, которая должна появиться поверх панели навигации. При наведении курсора на кнопку мой курсор меняется, и она становится полностью кликабельной и интерактивной. Однако кнопка никогда не появляется на экране, что бы я ни делал. В инструментах разработки при наведении курсора на код контур кнопки также не отображается. Я понятия не имею, что вызывает проблему, так как ошибок тоже нет. Спасибо!

.header-nav-action {
width: calc(100% - 48px);
margin: 40px 24px;
transform: translateY(50px);
opacity: 0;
display: none !important;
transition: .5s cubic-bezier(.6, .6, 0, 1) transform, .5s cubic-bezier(.6, .6, 0, 1) opacity;
}

.header-nav-action .button-inner {
padding: 14px 24px;
}

.header-trigger {
display: none;
margin-left: 16px;
padding: 0;
}

@media (max-width: 880px) {
.header {
padding: 20px 24px;
}

.header-nav {
position: fixed;
top: 80px;
padding: 0 24px;
width: 100vw;
left: 0;
height: 100vh;
visibility: hidden;
transition: visibility 0s .5s;
}

.header-nav ul,
.header-nav-action {
display: block !important;
}

.header-nav-item {
font-size: 32px;
font-weight: 500;
line-height: 40px;
padding: 24px;
display: block;
transform: translate(-200px);
background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, #FFF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
border-bottom: 1px solid rgba(181, 188, 217, .12);
opacity: 0;
transition: transform cubic-bezier(.6, .6, 0, 1), opacity cubic-bezier(.6, .6, 0, 1);
}

.header-nav li:nth-child(1) a {
transition-duration: .45s;
}

.header-nav li:nth-child(2) a {
transition-duration: .6s;
}

.header-nav li:nth-child(3) a {
transition-duration: .75s;
}

.header-nav li:nth-child(4) a {
transition-duration: .9s;
}

.header-nav li:nth-child(5) a {
transition-duration: 1.05s;
}

.header-trigger {
display: block;
}

.header-open .header-inner:before,
.header-open .header:before {
opacity: 0;
}

.header-open .header-nav {
visibility: visible;
transition: none;
}

.header-open .header-nav-action,
.header-open .header-nav-item {
transform: translate(0);
opacity: 1;
}
}

.button {
font-feature-settings: "ss01" on,"cv10" on,"calt" off,"liga" off
}

.button {
font-size: 14px;
line-height: 20px
}

.button {
font-weight: 500
}

.button {
color: #fff;
position: relative;
display: block;
padding: 0;
border-radius: 8px
}

.button-inner {
border-radius: inherit;
box-shadow: 0 0 #5e51e780,inset 0 -6px 12px #abb3ff6e;
background: linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 100%),linear-gradient(180deg,#8F57FF 0%,#4C2FFF 100%);
transition: cubic-bezier(.6,.6,0,1) .1s transform,cubic-bezier(.6,.6,0,1) .3s box-shadow;
padding: 10px 16px 10px 12px;
display: flex;
align-items: center;
position: relative;
justify-content: center;
z-index: 1
}

.button svg {
margin-right: 8px
}

.button:before,.button:after {
width: calc(100% - 2px);
border-radius: inherit;
height: calc(100% - 2px);
content: "";
position: absolute;
left: 0;
pointer-events: none
}

.button:before {
background: rgba(94,81,231,.5);
width: 100%;
height: calc(100% + 2px);
transition: cubic-bezier(.6,.6,0,1) .1s height;
bottom: -2px
}

.button:after {
top: 0;
border: 1px solid rgba(255,255,255,.12);
z-index: 2
}

.button:hover .button-inner {
box-shadow: 0 0 #5e51e780,inset 0 -6px 16px #abb3ffcc
}

.button:active {
cursor: pointer
}

.button:active .button-inner,.button:active:after {
transform: translateY(2px)
}

.button:active:before {
height: calc(100% - 2px)
}

.header-action {
font-feature-settings: "ss01" on, "cv10" on, "calt" off, "liga" off;
}

.header-action {
font-size: 14px;
line-height: 20px;
}

.header-action {
font-weight: 500;
}

.header-action {
border-radius: 6px;
box-shadow: inset 0 -6px 12px #ffffff0a;
color: #fff;
position: relative;
transition: cubic-bezier(.6, .6, 0, 1) .1s transform, cubic-bezier(.6, .6, 0, 1) .3s box-shadow, cubic-bezier(.6, .6, 0, 1) .3s width;
padding: 0;
width: 104px;
white-space: nowrap;
}

.header-action-inner {
padding: 6px 14px;
border-radius: inherit;
isolation: isolate;
overflow: hidden;
position: relative;
}

.header-action-default {
transition: .45s cubic-bezier(.6, .6, 0, 1) transform, .45s cubic-bezier(.6, .6, 0, 1) opacity;
}

import { component$, $, useOnWindow } from '@builder.io/qwik';
import { s_400CzhsbFPA, s_Gbz8OdIVvQQ, _hW } from '../js/q-6fa34e3b';

// Import local images using ESM for optimization
import ImgQ78528f2a from '../../public/images/q-78528f2a.png?jsx';
import ImgQ96c1aaa4 from '../../public/images/q-96c1aaa4.png?jsx';
import ImgQ88cf6a51 from '../../public/images/q-88cf6a51.png?jsx';
import ImgQ66bf8b85 from '../../public/images/q-66bf8b85.png?jsx';
import ImgQ70a4eca3 from '../../public/images/q-70a4eca3.png?jsx';
import ImgQC10acb12 from '../../public/images/q-c10acb12.png?jsx';
import ImgQDa760d8c from '../../public/images/q-da760d8c.png?jsx';

export default component$(() => {
// Handle onLoad event
const handleOnLoad = $(s_400CzhsbFPA);

// Handle onVisible event using an intersection observer
const handleOnVisible = $(async (event: any, element: HTMLImageElement) => {
if (_hW && Array.isArray(_hW) && typeof _hW[2] === 'function') {
await _hW[2](element);
}
});

// Handle window resize event manually
const handleOnResize = $(s_Gbz8OdIVvQQ);

// Add the window resize event listener
useOnWindow('resize', handleOnResize);

return (





















































);
});



Подробнее здесь: https://stackoverflow.com/questions/786 ... -appearing