How to add shadow to UIButton?

Question

I would like to add a shadow to UIButton. I tried using the self.layer.shadow * properties. These properties work in UIView, but they behave differently in UIButton. I would really appreciate it if I could draw the shadows. Thank!

self.layer.cornerRadius = 8.0f; self.layer.masksToBounds = YES; self.layer.borderWidth = 1.0f; self.layer.shadowColor = [UIColor greenColor].CGColor; self.layer.shadowOpacity = 0.8; self.layer.shadowRadius = 12; self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f); 

Answer 1

There is only one tiny bug in the question that causes the shadow to not display: masksToBounds:YES also masks the shadow! Here is the correct code:

 self.layer.cornerRadius = 8.0f; self.layer.masksToBounds = NO; self.layer.borderWidth = 1.0f; self.layer.shadowColor = [UIColor greenColor].CGColor; self.layer.shadowOpacity = 0.8; self.layer.shadowRadius = 12; self.layer.shadowOffset = CGSizeMake(12.0f, 12.0f); 

Unfortunately, this means that we cannot mask the content and have a shadow at the same time without tricks.

Remember #import <QuartzCore/QuartzCore.h> .

Answer 2

Here's a simple solution if you are using UIButton :

 #import <QuartzCore/QuartzCore.h> button.imageView.layer.cornerRadius = 7.0f; button.layer.shadowRadius = 3.0f; button.layer.shadowColor = [UIColor blackColor].CGColor; button.layer.shadowOffset = CGSizeMake(0.0f, 1.0f); button.layer.shadowOpacity = 0.5f; button.layer.masksToBounds = NO; 

It just worked, and realized it was worth publishing. Hope this helps!

Answer 3

Here is a subclass that not only creates a shadow, but is also animated when a button is pressed.

 // // ShadowButton.h #import <Foundation/Foundation.h> @interface ShadowButton : UIButton { } @end // // ShadowButton.m #import "ShadowButton.h" #import <QuartzCore/QuartzCore.h> @implementation ShadowButton -(void)setupView{ self.layer.shadowColor = [UIColor blackColor].CGColor; self.layer.shadowOpacity = 0.5; self.layer.shadowRadius = 1; self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f); } -(id)initWithFrame:(CGRect)frame{ if((self = [super initWithFrame:frame])){ [self setupView]; } return self; } -(id)initWithCoder:(NSCoder *)aDecoder{ if((self = [super initWithCoder:aDecoder])){ [self setupView]; } return self; } -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ self.contentEdgeInsets = UIEdgeInsetsMake(1.0,1.0,-1.0,-1.0); self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f); self.layer.shadowOpacity = 0.8; [super touchesBegan:touches withEvent:event]; } -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ self.contentEdgeInsets = UIEdgeInsetsMake(0.0,0.0,0.0,0.0); self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f); self.layer.shadowOpacity = 0.5; [super touchesEnded:touches withEvent:event]; } @end 

Answer 4

You can subclass UIButton and overwrite the drawRect: method and manually add a shadow. This is a lot more work, and now you have to do a few things about the 2d quartet, but the result is exactly what you want. Otherwise, you can simply add an image, but I prefer a subclass of UIButton, because it is very flexible regarding the size of the button, more general.

Answer 5

You can subclass and adjust its values ​​in Xcode

The following is an example:

 import UIKit import QuartzCore @IBDesignable class CustomButton: UIButton { @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius } } @IBInspectable var borderWidth: CGFloat = 0 { didSet { layer.borderWidth = borderWidth } } @IBInspectable var borderColor: UIColor = UIColor.grayColor() { didSet { layer.borderColor = borderColor.CGColor } } @IBInspectable var shadowColor: UIColor = UIColor.grayColor() { didSet { layer.shadowColor = shadowColor.CGColor } } @IBInspectable var shadowOpacity: Float = 1.0 { didSet { layer.shadowOpacity = shadowOpacity } } @IBInspectable var shadowRadius: CGFloat = 1.0 { didSet { layer.shadowRadius = shadowRadius } } @IBInspectable var masksToBounds: Bool = true { didSet { layer.masksToBounds = masksToBounds } } @IBInspectable var shadowOffset: CGSize = CGSizeMake(12.0, 12.0) { didSet { layer.shadowOffset = shadowOffset } } }