Getting transparent UIButton after applying gradient - ios

Question

I am learning Swift by trying to develop an app.I want to design a button by adding gradient layer, but the problem is it doesn't appear on the screen. It does its function when I clicked where it should appear tho.
extension UIColor {
convenience init(red: Int, green: Int, blue: Int) {
assert(red >= 0 && red <= 255, "Invalid red component")
assert(green >= 0 && green <= 255, "Invalid green component")
assert(blue >= 0 && blue <= 255, "Invalid blue component")
self.init(red: CGFloat(red) / 255.0, green: CGFloat(green) / 255.0, blue: CGFloat(blue) / 255.0, alpha: 1.0)
}
convenience init(rgb: Int) {
self.init(
red: (rgb >> 16) & 0xFF,
green: (rgb >> 8) & 0xFF,
blue: rgb & 0xFF
)
}
}
extension UIButton
{
func applyGradient(colors: [CGColor])
{
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
gradientLayer.frame = self.bounds
self.layer.addSublayer(gradientLayer)
}
lazy var loginButton: UIButton = {
let button = UIButton(type: .system)
let color1 = UIColor(red: 26, green: 41, blue: 128)
let color2 = UIColor(red: 38, green: 208, blue: 206)
button.applyGradient(colors: [color1.cgColor, color2.cgColor])
button.setTitle("Log in", for: .normal)
button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
button.setTitleColor(.black, for: .normal)
button.addTarget(self, action: #selector(handleButtonLogin), for: .touchUpInside)
return button
}()
Actually, it should say Log in(white color) with blue to green gradient layer. If I set the log in title color to black. I can see it when I run the code.

Answer 1

You only miss the frame
loginButton.frame = self.view.frame
self.view.addSubview(loginButton)
loginButton.applyGradient(colors: [UIColor.red.cgColor,UIColor.blue.cgColor])
//
Also change this line
self.layer.addSublayer(gradientLayer)
to
self.layer.insertSublayer(gradientLayer, at: 0)
as not to hide the title of the button
//