AquaButtonStyle.swift

struct AquaButtonStyle: ButtonStyle {
  func makeBody(configuration: Self.Configuration) -> some View {
    AquaButton(configuration: configuration)
  }
}

struct AquaButton: View {
  let configuration: AquaButtonStyle.Configuration
  let mainGradient = Gradient(colors: [Color(white: 1, opacity: 0.9),
                                       Color(white: 1, opacity: 0)])
  let highlightGradient = Gradient(colors: [.white,
                                            Color(white: 1, opacity: 0.7),
                                            Color(white: 1, opacity: 0.3)])
  var body: some View {
    GeometryReader { geometry in let highlightHeight = geometry.size.height * 0.3
      ZStack {
        //Main colour (foregroundColor of the Button)
        Capsule()
        //Gradient on top of the main colour
        LinearGradient(gradient: mainGradient, startPoint: .bottom, endPoint: .top)
        
        Group {//Top highlight
          LinearGradient(gradient: highlightGradient, startPoint: .top, endPoint: .bottom)
            .frame(height: highlightHeight)
            .clipShape(Capsule())
            .padding(.horizontal, 5)
        }
        .frame(maxHeight: .infinity, alignment: .top)
        
        //The outline for the button
        Capsule()
          .stroke(lineWidth: 2)
          .foregroundColor(.black)
        
        //The generic Label, most likely a Text with the title of the Button
        configuration.label
          .foregroundColor(.black)
          .font(.system(size: 10, weight: .bold, design: .default))
      }
      //Make sure none of the layers go outside the shape
      .clipShape(Capsule())
    }
  }
}