How to give shadow with cornerRadius to a Button in SwiftUI

Question

I'm trying to give a shadow to Button using following code.

Code:

Button(action: {

            }) {
                Text("SIGN IN")
                    .font(.system(size: 17))
                    .fontWeight(.bold)
                    .foregroundColor(.green)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding()
                    .background(Color.white)
                    .clipped()
                    .overlay(
                        RoundedRectangle(cornerRadius: 25)
                           .stroke(lineWidth: 1)
                           .foregroundColor(.white)
                    )

            }
            .shadow(color: .gray, radius: 2, x: 0, y: 2)

Output:

In above image you can see that shadow is not proper.

How can I achieve the following?

Answer 1

I would do it like this

Note: the last .padding is not important, depending on where and how the button will be placed, here is just for demo.

Button(action: {

}) {
    Text("SIGN IN")
        .font(.system(size: 17))
        .fontWeight(.bold)
        .foregroundColor(.green)
        .frame(minWidth: 0, maxWidth: .infinity)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.white)
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
    )
    .padding()
}

Answer 2

Instead of setting the shadow to the Button directly try setting the shadow to your overlay like this:

    Button(action: {

    }) {
        Text("SIGN IN")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(.green)
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .background(Color.white)
            .clipped()
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(lineWidth: 1)
                    .foregroundColor(.white)
                    .shadow(color: .gray, radius: 2, x: 0, y: 2)
        )

    }

Let me know if it helps!

Answer 3

Use this if you only want the shadow to be on the bottom of your button.

   Button(action: {

        }) {
            Text("SIGN IN")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(.green)
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .background(Color.white)
                .cornerRadius(25)
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
        }