gpt4 book ai didi

html - 悬停时移动边框(CSS)

转载 作者:行者123 更新时间:2023-12-05 01:54:23 25 4
gpt4 key购买 nike

我喜欢这个网站上的按钮 - https://veronicaromney.com/

我尝试从网站复制 CSS,但我无法使其正常工作。

我确实使用 Elementor,我将代码添加到主题(用于按钮),然后将 ID 添加到按钮,但我得到的是按钮 block (整个 block )获得了 CSS,并且在悬停时什么也没做。

你能帮我制作这些按钮吗?

这是我目前拥有的代码,但几乎不适合我。

.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}

最佳答案

.mmb-btn { -webkit-text-size-adjust: 100%;
box-sizing: border-box;
text-decoration: none;
text-rendering: optimizeLegibility;
position: relative;
color: #fff;
border: 0 none;
box-shadow: 0 4px 13px rgba(0, 0, 0, 0.1);
background-color: #e4b067;
display: inline-block;
transition: none 0s ease 0s;
text-align: inherit;
line-height: 24px;
border-width: 0px;
margin: 0 auto;
padding: 12px 33px 11px;
letter-spacing: 4px;
font-weight: 400;
font-size: 14px;
}
.mmb-btn:before {
border: 1px solid #000;
top: 7px;
left: 7px;
}
.mmb-btn::after {
bottom: 0;
right: 0;
}
.mmb-btn:before, .mmb-btn:after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
transition-property: all;
transition-duration: 0.25s;
transition-timing-function: ease;
transition-delay: 0s;
}
.mmb-btn:hover:before, .mmb-btn:hover:after {
top: 0;
left: 0;
transition: all 0.25s ease;
}
<a id="start-here-btn" class="mmb-btn alignright" href="/contact/"> GET STARTED </a>

您缺少 .mmb-btn:hover:before, .mmb-btn:hover:after

关于html - 悬停时移动边框(CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70670149/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com