如何在網站上新增具有漸變邊框的按鈕
P粉621033928
P粉621033928 2023-09-05 20:41:10
0
1
492

我的問題是按鈕顯示得非常小,而且我在下面調整高度或寬度沒有任何效果。

我已經將程式碼輸入到我的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; }

P粉621033928
P粉621033928

全部回覆 (1)
P粉985686557

我在你的頁面上把按鈕做得比原來大一些(只需在.btn上寫入height和width)。

.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; width: 550px; #do width height: 150px; # do height } So good day; ) .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; }
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!