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

I am trying to implement a custom style button like the image shown below using css.

我在我的css文件中try 了这一点，我能够实现更接近所需设计的东西:

.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，这样我就可以实现第一张图片中所需的设计！