CSS弯曲按钮

Question

我需要一个按钮的轮廓，该按钮在顶部和底部弯曲，但不在侧面弯曲。请参阅下面的示例图片，了解我的要求。我将像我这样设置网站上的所有按钮。我尝试过使用border-radius的几种方法，但我还没有成功。谢谢。

Answer 1

使用:before和:after按钮

＆＃13;

＆＃13;

.btn {
  border-top:none;
  border-bottom:none;
  border-right: 2px solid white;
  border-left: 2px solid white ;
  background-color: #273649;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}
body{
  background-color: #273649;
}
.btn:after {
    display: block;
    content: "";
    position: absolute;
    width: 89px;
    height: 16px;
    border-top: white 2px solid;
    top: 48px;
    left: 7px;
    border-radius: 40%;
}
.btn:before {
    display: block;
    content: "";
    position: absolute;
    width: 89px;
    height: 16px;
    border-top: white 2px solid;
    top: 4px;
    left: 7px;
    border-radius: 40%;
}

＆＃13;

<button class="btn">Info</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我知道这不是您所期望的答案，但我认为获得此结果的最佳方式（获得合适结果的最简单方法）是使用backgroung-image。

.button {
  background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png); 
  background-size: 100% 100%;
}

我只是发布它，以防有类似需求的人想要替代。

这里有一个例子：https://codepen.io/dknacht/pen/qKbWaY

Dknacht。