IOS add shadow to UIButton

Question

Im trying to add a shadow to a button but the shadow gets added to the text of the button instead of the whole button:

Do I need to use code to achieve this? Or is it a sizing issue? I could add shadow size on the storyboard but I don't see where to set if it should go around the button

Answer 1

It's because your button's background is transparent.
When you set shadow on a UIView which has a transparent background, then shadow applies to all his subviews (instead of around UIView's itself). In your case, you have a UIButton which has a transparent background, so the shadow is applied to all its visible subviews which in this case is only its titleLabel.
In other words, the system captures the non-transparent pixels of your view, tints it the shadowColor and places that image below the view with the shadowOffset.

So you have two solutions here:

1. Change your button's background color to smth else
2. Directly specify the shadowPath:
   button.layer.shadowPath = UIBezierPath(rect: button.layer.bounds).cgPath

Answer 2

I don't have much idea about storyboard but using below layer properties you can set shadow. You can play around the button.

I try the below code and change values based on your requirement and give your button some color

    //button is your button name
    button.backgroundColor = self.view.backgroundColor
    button.layer.shadowOpacity = 0.3
    button.layer.shadowRadius = 2.0
    button.layer.shadowColor = UIColor.yellow.cgColor
    button.layer.cornerRadius = 2

Answer 3

Shadow is given to the whole button. The thing is that the button itself has backgroundColor == .clear which means it does not create any shadow (only non-transparent part of it is its title, thus that's only part that creates shadow).

In your case, set the button's background color to the same color as its superview has, and you should get what you want.

Answer 4

here is two extension methods to add a shadow

extension UIView {
func setRadiusWithShadow(_ radius: CGFloat? = nil) { // this method adds shadow to right and bottom side of button
    self.layer.cornerRadius = radius ?? self.frame.width / 2
    self.layer.shadowColor = UIColor.darkGray.cgColor
    self.layer.shadowOffset = CGSize(width: 1.5, height: 1.5)
    self.layer.shadowRadius = 1.0
    self.layer.shadowOpacity = 0.7
    self.layer.masksToBounds = false
}

func setAllSideShadow(shadowShowSize: CGFloat = 1.0) { // this method adds shadow to allsides
    let shadowSize : CGFloat = shadowShowSize
    let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,
                                               y: -shadowSize / 2,
                                               width: self.frame.size.width + shadowSize,
                                               height: self.frame.size.height + shadowSize))
    self.layer.masksToBounds = false
    self.layer.shadowColor = UIColor.lightGray.withAlphaComponent(0.8).cgColor
    self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    self.layer.shadowOpacity = 0.5
    self.layer.shadowPath = shadowPath.cgPath
}
}

 self.view.layoutIfNeeded() // need this method to layout your run time button frame before giving shadow

first button is with all side shadow

self.recordMeasurementWrapperView.setAllSideShadow(shadowShowSize: 3.0)

second button is with shadow to only bottom and right

self.retakeMeasurementWrapperView.setRadiusWithShadow(2.0)