AquaCircularButton.swift

struct AquaHighAndLowlightView<T: Shape>: View {
  let shape: T
  let colors: [Color]
  var linearGradient: LinearGradient {
    LinearGradient(gradient: Gradient(colors: colors), startPoint: .top, endPoint: .bottom)
  }
  
  var body: some View {
    shape
      .stroke(linearGradient, lineWidth: 2.5)
  }
}

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

struct AquaCircularButton: View {
  var body: some View {
    GeometryReader { geometry in
      let topHighlightHeight = geometry.size.height * 0.3
      let bottomHighlightOffset = geometry.size.height * 0.6
      ZStack {
        Circle() //Behind highlight
          .foregroundColor(.aquaBehindCircularButtonHighlight)
          .offset(x: -1, y: 1)
        Group {
          Circle() // Main colour
          Circle() //Bottom highlight
            .foregroundColor(.white)
            .offset(y: bottomHighlightOffset)
            .blur(radius: 3)
          Group {
            Capsule() //Top highlight
              .frame(height: topHighlightHeight)
              .foregroundColor(.white)
              .blur(radius: 2)
              .padding(.horizontal, 3)
          }
          .frame(maxHeight: .infinity, alignment: .top)
          //Outline
          AquaHighAndLowlightView(shape: Circle(), colors:
                                    [.aquaCircularButtonHighlight,
                                     .aquaCircularButtonLowlight])
        }
        .clipShape(Circle())
      }
    }
    .aspectRatio(1, contentMode: .fit)
  }
}