使用HTML创建按钮边框的问题

Question

我正在尝试创建一个按钮。

如何创建像这张图片一样的边框？

<a class="genericBtn">
  <span>Click Me</span>
</a>

.genericBtn {
 cursor: pointer;
 background: #ffffff;
 color: #c40009;
 border: 1px solid #c40009;
 font-size: 20px;
 margin: 10px 0 0;
 padding: 20px 50px 20px 50px;
 width: auto;
}

Answer 1

您可以考虑左侧的渐变色：

.genericBtn {
  cursor: pointer;
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  /**/
  border-left:none;
  background:linear-gradient(to bottom,#c40009 20%,transparent 20%,transparent 80%,#c40009 0) left/1px 100% no-repeat;
  /**/
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 50px;
  display:inline-block;
}

<a class="genericBtn">
  <span>Click Me</span>
</a>

具有相同效果的另一种语法：

.genericBtn {
  cursor: pointer;
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  /**/
  border-left:none;
  background:
    linear-gradient(#c40009,#c40009) top left,
    linear-gradient(#c40009,#c40009) bottom left;
  background-size:1px 20%;
  background-repeat:no-repeat;
  /**/
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 50px;
  display:inline-block;
}

<a class="genericBtn">
  <span>Click Me</span>
</a>

Answer 2

使用:before

进行快速破解

.genericBtn {
  position: relative;
 cursor: pointer;
 background: #ffffff;
 color: #c40009;
 border: 1px solid #c40009;
 font-size: 20px;
 padding: 0 50px;
 height: 50px;
 display: inline-block;
 width: auto;
 line-height: 50px;
}

.genericBtn:before {
  position: absolute;
  top: 10px;
  left: -1px;
  width: 1px;
  height: 30px;
  background: #fff;
  content: "";
  display: block
}

<a class="genericBtn">
  <span>Click Me</span>
</a>

根据要求调整高度。