SwiftUIDepthButton

depthbutton.swift

import SwiftUI

struct DepthButton: View {
    var body: some View {
        GeometryReader { geometry in
            let size = min(geometry.size.width, geometry.size.height)
            
            VStack {
                ZStack {
                    // Outer circle
                    Circle()
                        .fill(
                            LinearGradient(
                                gradient: Gradient(stops: [
                                    .init(color: .black, location: 0.1),
                                    .init(color: .black.opacity(0.8), location: 0.5),
                                    .init(color: .white, location: 1)
                                ]),
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .frame(width: size, height: size)
                    
                    // Middle circle
                    Circle()
                        .fill(
                            LinearGradient(
                                gradient: Gradient(stops: [
                                    .init(color: .white, location: 0.02),
                                    .init(color: .black.opacity(0), location: 0.5),
                                    .init(color: .white, location: 0.9)
                                ]),
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .frame(width: size * 0.965, height: size * 0.965)
                    
                    // Inner circle
                    Circle()
                        .fill(
                            LinearGradient(
                                gradient: Gradient(colors: [
                                    Color(hex: "#c1c1c1"), Color(hex: "#818181")
                                ]),
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )
                        .frame(width: size * 0.88, height: size * 0.88)
                    
                    // Shadow arrow
                    Image(systemName: "arrow.up")
                        .font(.system(size: size * 0.5, weight: .bold))
                        .foregroundColor(.black.opacity(0.5))
                        .offset(y: -size * 0.01) // Relative offset
                    
                    // Front arrow
                    Image(systemName: "arrow.up")
                        .font(.system(size: size * 0.5, weight: .bold))
                        .foregroundColor(Color(hex: "#efefef"))
                }
                .shadow(color: .black.opacity(0.2), radius: size * 0.09, x: 0, y: size * 0.05)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .aspectRatio(1, contentMode: .fit)
            }
        }
    }
}

#Preview {
    DepthButton()
}

import SwiftUI

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (1, 1, 1, 0)
        }
        self.init(
            .sRGB,
            red: Double(r) / 255,
            green: Double(g) / 255,
            blue:  Double(b) / 255,
            opacity: Double(a) / 255
        )
    }
}