2023年7月6日 21:07:38go评论73阅读模式

英文:

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

<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.

.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;
}

&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;

答案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).

.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;
}

&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;

答案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;

.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;
}

&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;

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;}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

父元素背景只能从子元素中可见。

如何覆盖 ant-design 5 中的样式？

匹配复杂背景图像

当选中单选按钮时是否触发事件？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论