UIButton with BlurEffect

BlurredButtonView.swift

// Don't use this if you care about number of lines for the label.
// Because in the latest syntax (UIButton.Configuration) there is no option for setting number of lines.

final class BlurredButtonView: UIButton {
    
    private let gradientLayer = CAGradientLayer()
    
    let titleFont: UIFont
    let verticalSpacing: CGFloat
    let horizontalSpacing: CGFloat
    
    static let defaultVerticalSpacing = 8.0
    static let defaultHorizontalSpacing = 12.0
    static let defaultFont = UIFont.figtree(type: .medium, size: 13)
    
    init(
        text: String? = nil,
        blurStyle: UIBlurEffect.Style = .systemChromeMaterial,
        verticalSpacing: CGFloat? = nil,
        horizontalSpacing: CGFloat? = nil,
        font: UIFont? = nil
    ) {
        
        self.titleFont = font ?? Self.defaultFont
        self.verticalSpacing = verticalSpacing ?? Self.defaultVerticalSpacing
        self.horizontalSpacing = horizontalSpacing ?? Self.defaultHorizontalSpacing
        
        var buttonConfig = UIButton.Configuration.plain()
        buttonConfig.baseForegroundColor = .white
        buttonConfig.baseBackgroundColor = UIColor.white.withAlphaComponent(0.18)
        
        if let text {
            var attributedTitle = AttributedString(text)
            attributedTitle.font = titleFont
            buttonConfig.attributedTitle = attributedTitle
        }

        buttonConfig.contentInsets = .init(
            top: self.verticalSpacing,
            leading: self.horizontalSpacing,
            bottom: self.verticalSpacing,
            trailing: self.horizontalSpacing
        )
        
        var backgroundConfig = UIBackgroundConfiguration.clear()
        backgroundConfig.visualEffect = UIBlurEffect(style: blurStyle)
        backgroundConfig.cornerRadius = 13
        buttonConfig.background = backgroundConfig
        
        super.init(frame: .zero)
        self.configuration = buttonConfig
        self.titleLabel?.numberOfLines = 2
        setupBorder()
        setupGradient()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setText(_ text: String) {
        var attributedTitle = AttributedString(text)
        attributedTitle.font = titleFont
        self.configuration?.attributedTitle = attributedTitle
    }
    
    private func setupBorder() {
        let color = UIColor(red: 153/255.0, green: 153/255.0, blue: 153/255.0, alpha: 0.2)
        self.layer.borderColor = color.cgColor
        self.layer.borderWidth = 0.5
        self.layer.cornerRadius = 13
        self.clipsToBounds = true
    }
    
    private func setupGradient() {
        gradientLayer.colors = [
            UIColor(red: 22/255.0, green: 22/255.0, blue: 22/255.0, alpha: 0.2).cgColor,
            UIColor(red: 13/255.0, green: 13/255.0, blue: 13/255.0, alpha: 0.4).cgColor
        ]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        layer.insertSublayer(gradientLayer, at: 0)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.bounds = bounds
    }
}