英文:
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="container">
<button class="btn" data="Click me"></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: "";
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;
}
<!-- language: lang-html -->
<div class="container">
<button class="btn" data="Click me"></button>
</div>
<!-- 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: "";
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 -->
<div class="container">
<button class="btn" data="Click me"></button>
</div>
<!-- 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: "";
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 -->
<div class="container">
<button class="btn" data="Click me"></button>
</div>
<!-- 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像素; }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论