Advanced Button Styling in SwiftUI

Written by Team Kodeco

While SwiftUI offers a default button style, you have the freedom to customize buttons to match your application’s aesthetic. By utilizing SwiftUI’s powerful view modifiers, you can create buttons that look and behave exactly how you need them to.

Here you’ll look at an advanced example of button customization, where you create a 3D effect when the button is pressed. This tactile interaction can enhance your app’s user experience by making your UI feel more dynamic and engaging.

struct ContentView: View {
  @State private var isPressed = false  //1

  var body: some View {
    VStack {
      Button(action: {
        isPressed.toggle()  //2
      }) {
        Text("3D Button")  //3
      }
      .font(.title)  //4
      .frame(width: 200, height: 50)  //5
      .background(  //6
        ZStack {
          Color(isPressed ? .gray : .blue)  //7

          RoundedRectangle(cornerRadius: 10, style: .continuous)
            .foregroundColor(.white)
            .blur(radius: 4)
            .offset(x: -8, y: -8)

          RoundedRectangle(cornerRadius: 10, style: .continuous)
            .fill(
              LinearGradient(gradient: Gradient(colors: [.white, Color(.white).opacity(0.5)]),
                             startPoint: .topLeading,
                             endPoint: .bottomTrailing)
            )
            .padding(2)
            .blur(radius: 2)
        }
      )
      .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))  //8
      .shadow(color: Color(isPressed ? .blue : .gray).opacity(0.3), radius: 20, x: 20, y: 20)  //9
      .shadow(color: Color(isPressed ? .blue : .gray).opacity(0.2), radius: 20, x: -20, y: -20)  //9
      .scaleEffect(isPressed ? 0.95 : 1)  //10
      .animation(.spring(response: 0.5, dampingFraction: 0.5, blendDuration: 1), value: isPressed)  //11
      .foregroundColor(isPressed ? .blue : .white)  //12
    }
  }
}

Tap the button once and your preview should look like:

Here’s what’s happening in this code:

1. A state variable, isPressed, is declared to track whether the button is pressed.
2. When the button is pressed, the isPressed state variable is toggled between true and false.
3. The button’s label is set to "3D Button".
4. The button’s label is styled with a large title font.
5. The frame modifier is used to explicitly set the button’s size.
6. The background modifier is used to set the button’s background.
7. A ZStack is used to layer multiple views. Here, a conditional statement is used to change the color of the button when it’s pressed.
8. clipShape is used to clip the view to a rounded rectangle shape.
9. Two shadow modifiers create a 3D effect by applying lighter and darker shadows on different sides of the button. The shadow’s color and offset change based on the isPressed state.
10. The scaleEffect modifier is used to slightly reduce the size of the button when it’s pressed, enhancing the 3D effect.
11. An animation is added to smooth the button’s response to being pressed. The animation is tied to the isPressed state.
12. The foregroundColor modifier changes the button’s label color based on the isPressed state.

SwiftUI enables you to style your views creatively and craft unique user interfaces. However, it’s crucial to maintain consistency in your design language across your app, ensuring a cohesive user experience. Excessive or inconsistent styling can potentially confuse users, detracting from the overall app experience.

Leveraging the power of SwiftUI to style buttons and other UI elements is an excellent way to shape your app’s identity and help it stand out in a crowded marketplace. Nothing says ‘Download Me!’ quite like a button that is both visually compelling and delightfully interactive!