CSS3 - 圆形按钮 - 圆形边（水平和垂直）

Question

我想创建一个如下所示的按钮：

有没有办法仅使用 CSS 创建此按钮，而不使用附件作为背景图像。我试着玩弄 border-radius 但没能实现。

Answer 1

你必须玩属性 border-radius，例如它会是

#your-button {
  background-color: some-color;
  border-radius: some-percentage;
}

看看this

Answer 2

 .ellipseDiv {
   height: 50px;
   width: 100px;
   border: 2px solid #005;
   border-radius: 50px / 25px;
   background-color: #EE5D20;
 }

<div class="ellipseDiv"></div>

这应该能满足您的需求。

此示例是使用 div 制作的，但使用按钮也可以轻松完成！

Answer 3

我能找到的最接近的是这个....宽度为 410px，高度为 294px..实际图像远远大于此片段的 window...祝你好运

div{
  width:410px;
  height:294px;
  background:#ed1e79;
  border-radius:45%;
}

<div></div>

Answer 4

是的，有可能。

操作方法如下：

.pinkbutton {
    border-radius: 240px / 120px;
    background-color: #ed1e79;
    width : 175.2px;
    height : 126.6px;
}

<div class="pinkbutton"></div>

CSS3 - Rounded Button - Circular Sides (Horizontally and Vertically)