是否有我可以像这个按钮一样设置样式的css元素[关闭]答案

【问题标题】：Is there a css elements that i can style like this button [closed]是否有我可以像这个按钮一样设置样式的css元素[关闭]
【发布时间】：2022-10-30 21:44:50
【问题描述】：

如何在 html 和 css 中制作这样的按钮

【问题讨论】：

标签： javascript html css twitter-bootstrap graphic-design

【解决方案1】：

如果您想获得相同的 ok 字体样式，请使用特定字体（如 google 字体）。如果您有任何问题，请随时发表评论。

.myBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 40px;
  cursor: pointer;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(24,123,205,1) 0%, rgba(15,81,135,1) 50%);
}

.myBtn p {
  position: fixed;
  color: #ffffff;
  font-size: 3.2vw;
  font-weight: bold;
  
}

.myBtn .topLayer {
  width: 100%;
  height: 50%;
  border-top-left-radius: 4px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 13px;
  background-color: #187bcd;
}

.myBtn .bottomLayer {
  margin-left: 3%;
  width: 97%;
  height: 50%;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 2px;
  background-color: #0f5187;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

<div class="myBtn">
  <div class="topLayer">
    
  </div>
  <p>OK</p>
  <div class="bottomLayer">
  
  </div>
</div>

【讨论】：