如何在网站上添加具有渐变边框的按钮
P粉621033928
P粉621033928 2023-09-05 20:41:10
0
1
500

我的问题是按钮显示得非常小,而且我在下面调整高度或宽度没有任何效果。

我已经将代码输入到我的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学习者快速成长!