纯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>