我要翻译的内容: 如何在我的网站上添加具有渐变边框的按钮?

huangapple go评论68阅读模式
英文:

How can I add a button with a gradient border to my website?

问题

以下是您要翻译的内容:

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

我已经将代码输入到我的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;
}
<div class=&quot;container&quot;>
  <button class=&quot;btn&quot; data=&quot;Click me&quot;></button>
</div>

希望这有帮助!如果您需要进一步的信息,请告诉我。"

英文:

My issue is that the button appears very small, and I'm adjusting the height or width below does nothing.

I've input the code into my WordPress site using Elementor, I just dragged a HTML widget and pasted the below code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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: &quot;&quot;;
  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: &quot;&quot;;
  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;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;button class=&quot;btn&quot; data=&quot;Click me&quot;&gt;&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

只有代码部分需要翻译,以下是代码的中文翻译:

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.btn {
  /* 让按钮变得更大,只需在 .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
}

/* 好的一天; */
.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;
}

希望这对你有所帮助。如果你需要更多的翻译,请告诉我。

英文:

I do your button bigger than on your page (just on .btn write height and width).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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: &quot;&quot;;
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;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;button class=&quot;btn&quot; data=&quot;Click me&quot;&gt;&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

I've translated the provided content for you:

我已经测试了您的代码,看起来宽度和高度是可以调整的...另外,您不需要更改.container的宽度/高度来更改按钮大小,您需要调整.btn元素的内边距属性。如果调整内边距属性不起作用,可能是您的CSS被Elementor/主题覆盖了,请尝试在内边距属性中添加!important,例如 padding: 20px 60px !important;

要确定是否被覆盖,请按F12打开DevTools并检查您的.btn CSS。如果被划掉,那就意味着它被覆盖了。

英文:

I've tested your code and it looks like width and height is adjustable... Also you don't need to change .container width/height to change button size, you have to adjust padding attribute of .btn element. If adjusting padding attribute doesn't work it might be that your CSS is overwritten by Elementor/Theme, try to add !important to your padding attributes e.g padding: 20px 60px !important;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.btn {
padding: 30px 70px !important;
border: none;
outline: none;
position: relative;
z-index: 1;
border-radius: 5px;
background: linear-gradient(to right, #00FFA3, #DC1FFF);
cursor: pointer;
}
.btn::before {
content: &quot;&quot;;
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;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;button class=&quot;btn&quot; data=&quot;Click me&quot;&gt;&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

To figure out if it is overwritten, press F12 to open DevTools and check your .btn CSS. If it's crossed out that means it's overwritten:

我要翻译的内容:
如何在我的网站上添加具有渐变边框的按钮?

答案3

得分: 0

.btn { 高度: 200像素; 宽度: 400像素; 内边距: 20像素 60像素; }

英文:

Setting the height and width in the .btn style allows you to change the button size.

.btn {
height: 200px;
width: 400px;
padding: 20px 60px;}

我要翻译的内容:
如何在我的网站上添加具有渐变边框的按钮?

huangapple
  • 本文由 发表于 2023年7月6日 21:07:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76629190.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定