纯CSS创建带有双边框的按钮

Question

我正在尝试执行此按钮：

带有纯CSS的边框，但没有成功。是否可以使用纯CSS或其他技巧创建。

谢谢

Answer 1

您可以考虑多个背景和渐变：

.button {
  display:inline-block;
  padding:20px 25px;
  background:
    linear-gradient(grey,grey) top left    /80% 3px,
    linear-gradient(grey,grey) bottom right/80% 3px,
    
    linear-gradient(grey,grey) 0 calc(100% - 8px)/90% 3px,
    linear-gradient(grey,grey) 100% 8px          /90% 3px,
    
    linear-gradient(to bottom,grey 50%,transparent 50%,transparent 80%,grey 0) left top   /3px calc(100% - 8px),
    linear-gradient(to top,grey 50%,transparent 50%,transparent 80%,grey 0) right bottom/3px calc(100% - 8px);
  background-repeat:no-repeat;
}

<div class="button">
  Discover 
</div>

并带有一些CSS变量以提高灵活性：

.button {
  display:inline-block;
  padding:20px 25px;
  background:
    linear-gradient(grey,grey) top left    /80% var(--w,3px),
    linear-gradient(grey,grey) bottom right/80% var(--w,3px),
    
    linear-gradient(grey,grey) 0 calc(100% - var(--d,8px))/90% var(--w,3px),
    linear-gradient(grey,grey) 100% var(--d,8px)          /90% var(--w,3px),
    
    linear-gradient(to bottom,grey calc(60% - var(--s,25%)),transparent calc(60% - var(--s,25%)),transparent calc(60% + var(--s,25%)),grey 0) left top   /var(--w,3px) calc(100% - var(--d,8px)),
    linear-gradient(to top,grey calc(60% - var(--s,25%)),transparent calc(60% - var(--s,25%)),transparent calc(60% + var(--s,25%)),grey 0) right bottom/var(--w,3px) calc(100% - var(--d,8px));
  background-repeat:no-repeat;
}

<div class="button">
  Discover text
</div>

<div class="button" style="--w:5px;--d:16px;--s:5%">
  Discover more and more text
</div>

<div class="button" style="--w:8px;--d:12px;--s:10%">
  Discover<br>text
</div>

<div class="button" style="--w:2px;--d:5px;--s:20%">
  Disco
</div>

Answer 2

我的尝试涉及一个SVG作为背景

button {
  cursor: pointer;
  text-align: center;
  border: 0;
  padding: 40px 20px;
  background: url('data:image/svg+xml;utf8, <svg viewBox="0 0 200 60" 
              xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
              <path d="M160 2 H2 L 2 25 M2 35 V52 H190 M 12 8 H198 V58 H38" 
              fill="none" stroke="#aaa" stroke-width="4" vector-effect=
              "non-scaling-stroke"/></svg>') 0 0 no-repeat;

  background-size: cover;
}

  

Example Codepen