html - 使用 CSS 的按钮上的常规边框 + 偏移边框

Question

css button with double border

我试图在上面的按钮上实现相同的边框效果。

我能得到的最接近的是以下内容，但底部边框的右下角没有正确圆 Angular :

>

.login__button {
  background: transparent;
  border: none;
  border-width: 2px 1px 2px 2px;
  border-style: solid;
  border-color: pink;
  border-radius: 4px;
  color: pink;
  margin-bottom: 100px;
  position: relative !important;
  text-transform: uppercase;
  height: 33px;
  width: 102px;
  box-shadow:
    3.5px 4px 0px black,
    1.5px 0px 0px pink,
    3.5px 4px 0px black,
    2px 6px 0px pink;
}

.login__button::before {
  background: pink;
  content: '';
  position: absolute;
  height: 35px;
  width: 3.0px;
  border-radius: 3px;
  top: 3%;
  right: -2.8px;
}

>

我觉得这应该可以只使用盒子阴影，但似乎没有办法修改盒子阴影的宽度以正确插入黑色部分。

Answer 1

所以想法是让 .login__button:before 基本上看起来和 .login__button 一样，但改变定位，并给它一个更低的 >z-index 比 .login__button。

.login__button {
  background-color: black;
  border: 2px solid #FF00A0;
  border-radius: 4px;
  color: #FF00A0;
  position: relative;
  font-size: 15px;
  height: 33px;
  width: 102px;
  cursor: pointer;
}
.login__button:before {
  content: '';
  background-color: black;
  border: 2px solid #FF00A0;
  border-radius: 4px;
  position: absolute;
  width: 100%;
  height: 34px;
  top: -2px;
  left: -2px;
  z-index: -1;
  cursor: pointer;
  box-shadow: 0 0 20px rgb(255,0,160);
}
.login__button:active {
  background-color: gold;
}
.login__button:active:before {
  background-color: gold;
}

<button class="login__button">LOG IN</button>

为此，我为按下按钮添加了样式。

.login__button:active {
  background-color: gold;
}
.login__button:active:before {
  background-color: gold;
}