按钮后面的边框略低于位置CSS

Question

我试图在按钮CSS下方实现，我尝试使用box-shadow以及psuedo代码，即在仍然无法获得所需的输出之前。

我想要的按钮：

我的代码：

.et_pb_button {
  background-color: #f16922!important;
  width: 65%;
  outline: 3px solid #f16922;
  outline-offset: 10px;
  text-transform: uppercase;
  font-size: 14px!important;
}

<a href="" class="et_pb_button">Button</a>

Answer 1

请参见以下代码段：

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
  z-index: -1;
}

<button>View Project</button>

Answer 2

.btngroup button{
  background-color: rgb(29, 174, 236);
  border: 0;
  padding: 10px 15px;
  font-size: 15px;
  color: white;
  width: 150px;
  height: 50px;
  text-transform: uppercase
}

.btngroup .drop{
  width: 165px;
  height: 50px;
  border: 1.5px solid red;
  margin-top: -42.5px;
}

<center>
<div class="btngroup">
  <button>view project</button>
  <div class="drop"></div>
</div>
</center>

Answer 3

这是一个具有一个元素并且具有多个背景和边框图像的想法：

.button {
  display:inline-block;
  padding:10px 60px 20px;
  margin:10px;  
  color:#fff;
  
  border:2px solid transparent;
  border-image:linear-gradient(to bottom,transparent 10px,red 0) 2;

  background:
    linear-gradient(blue,blue) top center/calc(100% - 20px) calc(100% - 10px),
    linear-gradient(red,red)   0 8px     /100% 2px;
  background-repeat:no-repeat;

}

<span class="button">Button</span>

并使用CSS变量轻松控制整个形状：

.button {
  --t:10px; /* Distance of the border from the top*/
  --p:10px; /* Distance between the border and background*/
  --b:2;  /* Thickness of the border (unitless to be used with slice)*/
  --c:red;  /* border color*/

  display:inline-block;
  padding:var(--p) 60px calc(2*var(--p));
  margin:10px;  
  color:#fff;
  
  border:calc(1px*var(--b)) solid transparent;
  border-image:linear-gradient(to bottom,transparent var(--t),var(--c) 0) var(--b);

  background:
    linear-gradient(blue,blue) top center/calc(100% - 2*var(--p)) calc(100% - var(--p)),
    linear-gradient(var(--c),var(--c))   0 calc(var(--t) - 1px*var(--b))/100% calc(1px*var(--b));
  background-repeat:no-repeat;

}

<span class="button">Button</span>

<span class="button" style="--c:green;--t:15px;--p:8px;--b:3;">Button</span>

<span class="button" style="--c:#000;--t:25px;--p:15px;--b:1;">Button</span>

Answer 4

这是根据Hanif的建议的另一种选择，它使用两个伪元素而不是z索引为负的伪元素。对于某些背景（例如图像或渐变），可能需要调整::after

的背景位置

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: inherit;
  display: block;
}

<button>View Project</button>