Create a Custom UIButton in Swift

What we’re going to build.

In this tutorial, we’ll discuss how to create a custom UIButton. We’re going to also make this custom class an IBDesignable so that it may be editable from within the Storyboard editor. before that, we’ll get to know about @IBDesignable and @IBInspectable

@IBDesignable provides functionality for live rendering of changes of our custom views directly in a Storyboard

@IBInspectable allows us to create attributes in code that we can assign in a storyboard

Let’s create our custom class

create a new class, called UICustomButton

//
//  UICustomButton.swift
//  ios-ui-custom-button
//
//  Created by Lionel P. Albus on 5/8/21.
//

import Foundation
import UIKit

@IBDesignable
class UICustomButton: UIButton {
    // add your code here
}

Create button corner radius

// button corner radius
@IBInspectable var cornerRadius: CGFloat = 0 {
    didSet {
       self.layer.cornerRadius = cornerRadius
    }
}

button corner radius

Create button border colors and width

// button border colors
@IBInspectable var borderColor: UIColor = UIColor.clear {
    didSet {
       self.layer.borderColor = borderColor.cgColor
    }
}
// button border width
@IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
       self.layer.borderWidth = borderWidth
    }
}

button border colors

Create button shadow colors, opacity, and offset

// button shadow color
@IBInspectable var shadowColor: UIColor = UIColor.clear {
   didSet{
      self.layer.shadowColor = shadowColor.cgColor
      self.layer.masksToBounds = false
   }
}
// button shadow opacity
@IBInspectable var shadowOpacity: Float = 0.4 {
   didSet {
      self.layer.masksToBounds = false
      self.layer.shadowOpacity = shadowOpacity
   }
}
    
// button shadow offset
@IBInspectable var shadowOffset: CGSize = CGSize(width: 1, height: 4) {
    didSet {
       self.layer.masksToBounds = false
       self.layer.shadowOffset = shadowOffset
    }
}

button shadow colors

Create button shadow radius

// button shadow radius
@IBInspectable var shadowRadius: CGFloat = CGFloat(0.5) {
   didSet {
      self.layer.masksToBounds = false
      self.layer.shadowRadius = shadowRadius
   }
}

button shadow radius

Create button corner position

// button corner position
@IBInspectable var cornerPosition: Int = 0 {
   didSet {
      self.layer.maskedCorners = CornerPosition.initWith(position: cornerPosition).mask
   }
}
// ConerPosition class please go to my link on github for download source code https://raw.githubusercontent.com/Lionel-P-Ablus/ios-ui-custom-button/master/ios-ui-custom-button/Components/CornerPosition.swift

button corner position

Create button colors gradient

public override class var layerClass: AnyClass {
       CAGradientLayer.self
}
    
private var gradientLayer: CAGradientLayer {
        layer as! CAGradientLayer
}
// button start color gradient
@IBInspectable public var startColor: UIColor = .white {
    didSet {
       updateColors()
    }
}
    
// button end color gradient
@IBInspectable public var endColor: UIColor = .red {
   didSet {
      updateColors()
   }
}
    
// button start point gradient
@IBInspectable public var startPoint: CGPoint {
    get {
        gradientLayer.startPoint
    }
        
    set {
        gradientLayer.startPoint = newValue
    }
 }
    
 // button end point gradient
 @IBInspectable public var endPoint: CGPoint {
    get {
        gradientLayer.endPoint
    }
    set {
        gradientLayer.endPoint = newValue
    }
 }
    
 // update colores gradient
 private func updateColors() {
        gradientLayer.colors = [startColor.cgColor, endColor.cgColor]
 }

button colors gradient

Let’s apply our UICustomButton class to UI

in our storyboard go to the view controller and add a button then on the right corner click hide or show the Inspectors after that click the tab Show the identity inspector. now we’ll see the Custom Class section in class can select our UICustomButton that created and don’t forget to click Inherit Module From Target.

add class UICustonButton to our button

now let’s go to the tab Show the Attributes inspector after that we’ll see the Custom Button section, this section will show the function that we created in UICustomButton class.

add corner radius to our button

your can see our code here Lionel-P-Albus/ios-ui-custom-button

thanks for reading everyone. let’s try to change your UI Custom Button and enjoy your idea. if you have another idea for button style come to shared and comment with me. 👏👏👏