System built-in button style
struct ContentView: View {
var body: some View {
VStack {
Button("Plain", action: {
}).buttonStyle(PlainButtonStyle())
Button("Borderless", action: {
}).buttonStyle(BorderlessButtonStyle())
Button("Default", action: {
}).buttonStyle(DefaultButtonStyle())
}
}
}
Customize button style
struct ContentView: View {
var body: some View {
Button("Neumorphic", action: {
})
.buttonStyle(NeumorphicButtonStyle(bgColor: .blue))
}
}
struct NeumorphicButtonStyle: ButtonStyle {
var bgColor: Color
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.padding(20)
.background(
ZStack {
RoundedRectangle(cornerRadius: 10, style: .continuous)
.shadow(color: .white, radius: configuration.isPressed ? 7: 10, x: configuration.isPressed ? -5: -15, y: configuration.isPressed ? -5: -15)
.shadow(color: .black, radius: configuration.isPressed ? 7: 10, x: configuration.isPressed ? 5: 15, y: configuration.isPressed ? 5: 15)
.blendMode(.overlay)
RoundedRectangle(cornerRadius: 10, style: .continuous)
.fill(bgColor)
}
)
.scaleEffect(configuration.isPressed ? 0.95: 1)
.foregroundColor(.primary)
.animation(.spring())
}
}
Example 2:
struct ContentView: View {
@State var audioPlayer: AVAudioPlayer?
var body: some View {
Button(action: {
print("Button action")
}) {
HStack {
Image(systemName: "bookmark.fill")
Text("Bookmark")
}
}
.buttonStyle(GradientButtonStyle())
}
}
struct GradientButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.white)
.padding()
.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(15.0)
}
}
Effect 2:
struct GradientButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.white)
.padding()
.background(LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(15.0)
.scaleEffect(configuration.isPressed ? 1.3 : 1.0)
}
}
Effect 3:
struct GradientButtonStyle: ButtonStyle {
func makeBody(configuration: Self.Configuration) -> some View {
configuration.label
.foregroundColor(Color.white)
.padding()
.cornerRadius(15.0)
.scaleEffect(configuration.isPressed ? 1.3 : 1.0)
.background(configuration.isPressed ? Color.green : Color.yellow)
}
}