Creating a clear button with gradient border and gradient text

I have created a demo for you, you can do this with the help of CAGradientLayer see the following output and code for this.

enter image description here


enter image description here

For gradient button text color and border put your UIButton inside UIView, then assign CAGradientLayer to UIview.

Note:- Don't forget to set the button as the views mask, See the following code.

import UIKit

class ViewController: UIViewController {

    @IBOutlet var viewForButton: UIView!
    @IBOutlet var myButton: UIButton!

    override func viewDidLoad() {
        // Do any additional setup after loading the view, typically from a nib.

        // Create a gradient layer
        let gradient = CAGradientLayer()

        // gradient colors in order which they will visually appear
        gradient.colors = [,]

        // Gradient from left to right
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)

        // set the gradient layer to the same size as the view
        gradient.frame = viewForButton.bounds

        // add the gradient layer to the views layer for rendering
        viewForButton.layer.insertSublayer(gradient, at: 0)

        // Tha magic! Set the button as the views mask
        viewForButton.mask = myButton

        //Set corner Radius and border Width of button
        myButton.layer.cornerRadius =  myButton.frame.size.height / 2
        myButton.layer.borderWidth = 5.0


Extension: You can also prefer this extension for the same.

extension UIView{

    func gradientButton(_ buttonText:String, startColor:UIColor, endColor:UIColor) {

        let button:UIButton = UIButton(frame: self.bounds)
        button.setTitle(buttonText, for: .normal)

        let gradient = CAGradientLayer()
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradient.frame = self.bounds
        self.layer.insertSublayer(gradient, at: 0)
        self.mask = button

        button.layer.cornerRadius =  button.frame.size.height / 2
        button.layer.borderWidth = 5.0

How to use:

testView.gradientButton("Hello", startColor: .red, endColor: .blue)