我的問題是按鈕顯示得非常小,而且我在下面調整高度或寬度沒有任何效果。
我已經將程式碼輸入到我的WordPress網站中使用Elementor,我只是拖曳了一個HTML小部件並貼上了下面的程式碼。
.container { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background-color: white; } .btn { padding: 20px 60px; border: none; outline: none; position: relative; z-index: 1; border-radius: 5px; background: linear-gradient(to right, #00FFA3, #DC1FFF); cursor: pointer; } .btn::before { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius: 4px; background-color: white; z-index: -1; transition: 200ms } .btn::after { content: attr(data); font-size: 16px; background: linear-gradient(to left, #00FFA3, #DC1FFF); -webkit-background-clip: text; color: transparent; transition: 200ms } .btn:hover::before { opacity: 50%; top: 0px; right: 0px; bottom: 0px; left: 0px; } .btn:hover::after{ color: white; } body .container { height: 10vh; width: 20vw; display: flex; justify-content: center; align-items: center; background-color: white; } body .btn { padding: 20px 60px; border: none; outline: none; position: relative; z-index: 1; border-radius: 5px; background: linear-gradient(to right, #00FFA3, #DC1FFF); cursor: pointer; } body .btn::before { content: ""; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius: 4px; background-color: white; z-index: -1; transition: 200ms; } body .btn::after { content: attr(data); font-size: 16px; background: linear-gradient(to left, #00FFA3, #DC1FFF); -webkit-background-clip: text; color: transparent; transition: 200ms; } body .btn:hover::before { opacity: 50%; top: 0px; right: 0px; bottom: 0px; left: 0px; } body .btn:hover::after { color: white; }
我在你的頁面上把按鈕做得比原來大一些(只需在.btn上寫入height和width)。