如何使用CSS创建带有曲线的自定义按钮

Question

我正在尝试使用 css 实现自定义样式按钮，如下图所示。

我在我的CSS文件中尝试了这个，我能够实现更接近所需设计的东西：

.casinoButton {
position: relative;
display: inline-block;
border: none;
color: white;
font-size: 14px;
width: 100%;
overflow: hidden;
cursor: pointer;
/* background-color: #ff0000;  */
border-radius: 40% 0 0 0; /* Creates a curved effect */ 

}

.casinoButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000; /* Black color for the top-left corner */
border-radius: 50%;
z-index: -1;
transition: transform 0.3s ease;
transform: scale(0) translate(-50%, -50%);
transform-origin: top left;
}

.casinoButton:hover::before {
transform: scale(2) translate(-50%, -50%);
}


.liveCasinoButton {
  position: relative;
  display: inline-block;
  border: none;
  color: white;
  font-size: 14px;
  width: 100%;

  overflow: hidden;
  cursor: pointer;
  /* background-color: #2A2A2A; */
  border-radius: 0 40% 0 0; /* Creates a curved effect */
  }

 .liveCasinoButton::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000000; /* Black color for the top-left corner */
   border-radius: 50%;
   z-index: -1;
   transition: transform 0.3s ease;
   transform: scale(0) translate(-50%, -50%);
   transform-origin: top left;
   }

.liveCasinoButton:hover::before {
  transform: scale(2) translate(-50%, -50%);
}

通过上面的代码，我能够实现如下所示的设计。但我想得到第一张图片所示的按钮设计！

有人可以帮助我使用CSS，这样我就可以实现第一张图片中所需的设计！

Answer 1

您可以在父元素上使用带有 ellipse() 的 CSS 剪辑路径

.buttons-group {
  clip-path: ellipse(68% 100% at 50% 100%);
  display: flex;
  
  & button {
    flex: 1;
    background: hsl(355, 94%, 52%);
    color: #fff;
    border: 0;
    padding: 1rem 3rem;
    
    & +button {
      background: hsl(223, 13%, 21%)
    }
  }
}

<div class="buttons-group">
  <button type="button">Lorem</button>
  <button type="button">Ipsum</button>
</div>