如何在网站上添加具有渐变边框的按钮
P粉621033928
2023-09-05 20:41:10
<p>我的问题是按钮显示得非常小,而且我在下面调整高度或宽度没有任何效果。</p>
<p>我已经将代码输入到我的WordPress网站中使用Elementor,我只是拖动了一个HTML小部件并粘贴了下面的代码。</p>
<p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<button class="btn" data="点击我"></button>
</div></pre>
</p>
我在你的页面上把按钮做得比原来大一些(只需在.btn上写入height和width)。