Volumable buttons with Jetpack Compose

How to implement a volumable buttons with Jetpack Compose like this?

There are two shadows: black shadow at top and white shadow at bottom.

This is how that button described in Figma:

This is how I try to create that button in code:

@Composable
fun GameCoinsView(
  modifier: Modifier = Modifier,
  coins: Int,
  onClick: () -> Unit = {},
) {
  Box(
    modifier = modifier
      .clip(shape = shape)
      .width(IntrinsicSize.Min)
      .height(IntrinsicSize.Min)
  ) {
    Spacer(
      modifier = Modifier
        .align(Alignment.BottomCenter)
        .fillMaxWidth()
        .fillMaxHeight(fraction = 0.95f)
        .shadow(
          elevation = 2.dp,
          shape = RoundedCornerShape(12.dp),
          spotColor = Color.White.copy(alpha = 0.08f),
        ),
    )
    Spacer(
      modifier = Modifier
        .align(Alignment.TopCenter)
        .fillMaxWidth()
        .fillMaxHeight(fraction = 0.95f)
        .shadow(
          elevation = 2.dp,
          shape = RoundedCornerShape(12.dp),
          spotColor = Color.Black.copy(alpha = 0.28f),
        ),
    )
    Spacer(
      modifier = Modifier
        .fillMaxSize()
        .background(color = Color.White.copy(alpha = 0.08f))
        .blur(40.dp),
    )

    Text(
      modifier = Modifier.padding(vertical = 8.dp, horizontal = 12.dp),
      text = NumberFormat.getNumberInstance(ViewUtils.getDefaultLocaleCompose()).format(coins),
      fontSize = 18.sp,
      lineHeight = 23.4.sp,
      fontWeight = FontWeight.W600,
    )
  }
}

The result of my code is:

You need to sign in to view this answers