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

i tried this in my css file and i was able to achieve something closer to the desired design :

.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%);
}

with the above code, i was able to achieve the design as shown below. but i would like to get the design of the buttons as shown in the first image!

Can someone help me with css, so i can achieve the desired design as in the first image !