我们可以用纯CSS做这种按钮吗

Question

当前，我正在使用白色边框的图像，并且在内部使用了按钮。但是它有响应问题。我们可以用css来创建整个事情，还是可以用css来解决响应问题呢？

.header-btn-section img{
display: block;
margin: 0 auto;
margin-top: -23px;
width: 370px;
height: 80px;
}
.header-btn {
    padding: 15px 40px 15px 40px;
    background: #5760f4;
    background-image: -webkit-linear-gradient(left, #5760f4 , #f3135d);
    background-image: linear-gradient(to right, #5760f4 , #f3135d); 
    border-radius: 40px;
    border: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}
.header-btn:hover {
    background: #6e73df;
    background-image: -webkit-linear-gradient(left, #f3135d, #5760f4);
    background-image: linear-gradient(to right,#f3135d,#5760f4); 
}
.btn-container {
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%); 
}

<div class="header-btn-section" style="position: relative">
      <img class="btn-background" src="https://i.imgur.com/StNBlDd.png">
      <div class="btn-container">
          <button class="header-btn">Try DddxdVdDk Free !</button>
      </div>
  </div>

Answer 1

您可以通过考虑背景，边框和背景剪辑的一个元素来做到这一点：

.box {
  width:200px;
  height:70px;
  border-radius:70px;
  padding:5px; /* Control the space between border and background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Don't color the padding */
  border:3px solid #fff;
  
  color:#fff;
  font-size:20px;
}
.box:hover {
  background-image:linear-gradient(to left,red, blue);
}

body {
 background:pink;
}

<button  class="box">Some text here</button>

如果要使用填充来控制间距，请使用伪元素：

.box {
  padding:20px 40px;
  max-width:220px;
  border-radius:70px;
  position:relative;
  z-index:0;
  border:none;
  background:none;
  
  color:#fff;
  font-size:20px;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:inherit;
  padding:5px; /* Control the space between border and background*/
  background-image:linear-gradient(to right,red, blue);
  background-clip:content-box; /* Don't color the padding */
  border:3px solid #fff;
}

.box:hover::before {
  background-image:linear-gradient(to left,red, blue);
}


body {
 background:pink;
}

<button  class="box">Some text here</button>

<button  class="box">Some long text here</button>