如何用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代码，实现目标按钮样式！

内容的提问来源于stack exchange，提问作者Joskaa