我喜欢这个网站上的按钮 - 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/