Search code examples
iosiphoneuibuttonswift2gradient

How can I do programmatically gradient border color UIButton with Swift


How can I design programmatically UIButton like this gradient border color?

Gradient button]

Thanks for help


Solution

  • let gradient = CAGradientLayer()
    gradient.frame =  CGRect(origin: CGPointZero, size: self.myButton.frame.size)
    gradient.colors = [UIColor.blueColor().CGColor, UIColor.greenColor().CGColor]
    
    let shape = CAShapeLayer()
    shape.lineWidth = 2
    shape.path = UIBezierPath(rect: self.myButton.bounds).CGPath
    shape.strokeColor = UIColor.blackColor().CGColor
    shape.fillColor = UIColor.clearColor().CGColor
    gradient.mask = shape
    
    self.myButton.layer.addSublayer(gradient)
    

    Swift 3 version:

        let gradient = CAGradientLayer()
        gradient.frame =  CGRect(origin: CGPoint.zero, size: self.myButton.frame.size)
        gradient.colors = [UIColor.blue.cgColor, UIColor.green.cgColor]
        
        let shape = CAShapeLayer()
        shape.lineWidth = 2
        shape.path = UIBezierPath(rect: self.myButton.bounds).cgPath
        shape.strokeColor = UIColor.black.cgColor
        shape.fillColor = UIColor.clear.cgColor
        gradient.mask = shape
        
        self.myButton.layer.addSublayer(gradient)
    

    For the more step by step details here is a video link https://www.youtube.com/watch?v=Pre127gnXi0