时间戳

首页 > 解决方案 > CSS 曲线按钮

html - CSS 曲线按钮

问题描述

我需要一个在顶部和底部弯曲的按钮的轮廓，但不是侧面。请参阅下面的示例图片以了解我的要求。我会将我网站上的所有按钮都设置为这样的样式。我已经尝试了几种使用边界半径的方法，但我还没有成功。谢谢你。

在此处输入图像描述

标签： htmlcssstyling

解决方案

使用:before和:after按钮

.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%;
}
<button class="btn">Info</button>

推荐阅读