How can I create a button like the following in SwiftUI in macOS?

Edit: Here is the code I am using to create the button:

Button(action: {}) {
  VStack {
    Text("Sign In")
  }
}
.buttonStyle(.bordered)

This produces:

However, attempting to add padding within the button creates this issue:

A similar issue arises when using frame(width:height:) on the button, or on the content within the button.

Additionally, how can I accent this button, just like in the Pages onboarding?

Thanks.

CodePudding user response：

you could try something simple like this:

Button(action: {}) {
    Text("Sign In")
        .padding(22)
        .frame(width: 222, height: 44)
        .background(Color.blue)
        .foregroundColor(Color.white)
}.frame(width: 222, height: 44)
 .background(Color.blue).cornerRadius(10)

CodePudding user response：

Here is a way for you:

struct ContentView: View {
    
    var body: some View {
        
        Color.gray
            .frame(width: 800.0, height: 500.0)
            .overlay(CustomButtonView().padding(), alignment: .bottom)
            
        
    }
    
}


struct CustomButtonView: View {
    
    @State private var scaleAnimation: Bool = Bool()
    
    var body: some View {
        
        Text("Button").frame(width: 300.0, height: 50.0).background(Color.blue.cornerRadius(10)).foregroundColor(.white).onTapGesture {
            print("Action!")
            scaleAnimation = true
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()   DispatchTimeInterval.milliseconds(100)) { scaleAnimation = false }
            
        }
        .shadow(radius: 5)
        .scaleEffect(scaleAnimation ? 0.98 : 1.0)
        .animation(.interactiveSpring(), value: scaleAnimation)
        
    }
    
}