如何在网站上添加具有渐变边框的按钮
P粉621033928
P粉621033928 2023-09-05 20:41:10
0
1
558
<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>
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;
}
<div class="container">
  <button class="btn" data="点击我"></button>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!