摆脱悬停时的边界

Question

我创建了一个带有多个边框的小按钮，悬停在它上，我可以看到颜色的平滑过渡。当我在边界上空盘旋时，我无法摆脱边界。目前，当我悬停时，颜色和背景颜色会发生变化，但边框不会消失。

这是我的密码。

.c-btn--lg {
font-size: 2rem;
line-height: 1;
border: none;
font-family: titling-gothic-fb-compressed, sans-serif;
font-weight: 400;
letter-spacing: .2rem;
min-width: 14.5rem;
padding: 1.6rem 2rem;
}
.c-btn--primary {
background-color: transparent;
border: none;
color: #382f2d;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:before {
bottom: 0.5rem;
left: 0;
right: 0.5rem;
top: 0;
}
.c-btn--primary:after {
bottom: 0;
left: 0.5rem;
right: 0;
top: 0.5rem;
}
.c-btn--primary:after,
.c-btn--primary:beforee {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:after,
.c-btn--primary:before {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:focus,
.c-btn--primary:hover {
-webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
color:white;
}

<div class="submitwrapper">
<button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit">ENTER</button>
</div>

我该怎么解决这个问题？

Answer 1

你可以做到这一点"平滑"；具有CCD_ 1颜色。

.c-btn--lg {
font-size: 2rem;
line-height: 1;
border: none;
font-family: titling-gothic-fb-compressed, sans-serif;
font-weight: 400;
letter-spacing: .2rem;
min-width: 14.5rem;
padding: 1.6rem 2rem;
}
.c-btn--primary {
background-color: transparent;
border: none;
color: #382f2d;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:before {
bottom: 0.5rem;
left: 0;
right: 0.5rem;
top: 0;
}
.c-btn--primary:after {
bottom: 0;
left: 0.5rem;
right: 0;
top: 0.5rem;
}
.c-btn--primary:after,
.c-btn--primary:before {
border: 0.1rem solid rgba(56, 47, 45, 1);
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:focus,
.c-btn--primary:hover {
-webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
color:white;
}
.c-btn--primary:hover::after,
.c-btn--primary:hover::before {
border-color: rgba(56, 47, 45, 0);
}

<div class="submitwrapper">
<button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit">ENTER</button>
</div>

Answer 2

您无法将边界设置为"平滑"；消失，但你可以用这些选择器来清除它们：

.c-btn--primary:hover::after,
.c-btn--primary:hover::before {
border: none;
}

.c-btn--lg {
font-size: 2rem;
line-height: 1;
border: none;
font-family: titling-gothic-fb-compressed, sans-serif;
font-weight: 400;
letter-spacing: .2rem;
min-width: 14.5rem;
padding: 1.6rem 2rem;
}
.c-btn--primary {
background-color: transparent;
border: none;
color: #382f2d;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:before {
bottom: 0.5rem;
left: 0;
right: 0.5rem;
top: 0;
}
.c-btn--primary:after {
bottom: 0;
left: 0.5rem;
right: 0;
top: 0.5rem;
}
.c-btn--primary:after,
.c-btn--primary:before {
border: 0.1rem solid #382f2d;
content: "";
pointer-events: none;
position: absolute;
-webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease;
}
.c-btn--primary:focus,
.c-btn--primary:hover {
-webkit-box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
box-shadow: 0 0 0 0 #d1ccbd, inset 1rem 7rem 0 0 #d1ccbd;
color:white;
}
.c-btn--primary:hover::after,
.c-btn--primary:hover::before
{
border: none;
}

<div class="submitwrapper">
<button class="c-age-gate__submit c-btn c-btn--primary c-btn--lg" type="submit">ENTER</button>
</div>

Answer 3

您可以简单地将其添加到代码中：

.c-btn--primary:hover::after,
.c-btn--primary:hover::before {
border: none;
}