How can I get this overlay effect in Jetpack Compose?

Question

I'm trying to do this effect in Jetpack Compose where it has like a kind of solid shadow. I've tried to overlap the button with a Box, but I can't get it because with the padding I can't make it stand out, it just makes it smaller.

This is my best try:

Box(modifier = Modifier.wrapContentSize()) {

    Box(
        modifier = Modifier
        .fillMaxWidth()
        .height(92. dp)
        .clip(RoundedCornerShape(16. dp))
        .background(JordyBlue)
        .padding(top = 10. dp)
    )

    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(16. dp),
        colors = ButtonDefaults.buttonColors(containerColor = Portage),
        modifier = Modifier
        .fillMaxWidth()
        .height(92. dp)
    ) {

        Text(
            text = "Continue",
            fontFamily = RobotoFamily,
            fontWeight = FontWeight.SemiBold,
            fontSize = 20. sp,
            color = Color.White
        )
    }
}

Answer 1

You can use Canvas for your custom button as below.

Note: You can set Size as per your choice and Height of your choice

You need to define two rounded Rectangles one above another with size variation.

Preview Of Code

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun CustomButtonExample() {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .height(80.dp)
    ) {
        val si = size.copy(height = size.height - 15)
        drawRoundRect(
            cornerRadius = CornerRadius(35f, 35f),
            color = Color(0xFFA7A4F8),
            size = size
        )
        drawRoundRect(
            cornerRadius = CornerRadius(35f, 35f),
            color = Color(0xFF8976EA),
            size = si
        )
    }

}