UIButton w/ gradient, rounded corners, border, and drop shadow UIButton w/ gradient, rounded corners, border, and drop shadow ios ios

UIButton w/ gradient, rounded corners, border, and drop shadow


This is the way I found to have a button with rounded corner, gradient, and drop shadow. This example has one particular gradient, but can obviously be replaced with other gradients.

@implementation CustomButton- (id)initWithFrame:(CGRect)frame{    if((self = [super initWithFrame:frame])){        [self setupView];    }    return self;}- (void)awakeFromNib {    [self setupView];}# pragma mark - main- (void)setupView{    self.layer.cornerRadius = 10;    self.layer.borderWidth = 1.0;    self.layer.borderColor = [UIColor colorWithRed:167.0/255.0 green:140.0/255.0 blue:98.0/255.0 alpha:0.25].CGColor;    self.layer.shadowColor = [UIColor blackColor].CGColor;    self.layer.shadowRadius = 1;    [self clearHighlightView];    CAGradientLayer *gradient = [CAGradientLayer layer];    gradient.frame = self.layer.bounds;    gradient.cornerRadius = 10;    gradient.colors = [NSArray arrayWithObjects:                         (id)[UIColor colorWithWhite:1.0f alpha:1.0f].CGColor,                         (id)[UIColor colorWithWhite:1.0f alpha:0.0f].CGColor,                         (id)[UIColor colorWithWhite:0.0f alpha:0.0f].CGColor,                         (id)[UIColor colorWithWhite:0.0f alpha:0.4f].CGColor,                         nil];    float height = gradient.frame.size.height;    gradient.locations = [NSArray arrayWithObjects:                            [NSNumber numberWithFloat:0.0f],                            [NSNumber numberWithFloat:0.2*30/height],                            [NSNumber numberWithFloat:1.0-0.1*30/height],                            [NSNumber numberWithFloat:1.0f],                            nil];    [self.layer addSublayer:gradient];}- (void)highlightView {    self.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);    self.layer.shadowOpacity = 0.25;}- (void)clearHighlightView {    self.layer.shadowOffset = CGSizeMake(2.0f, 2.0f);    self.layer.shadowOpacity = 0.5;}- (void)setHighlighted:(BOOL)highlighted{    if (highlighted) {        [self highlightView];    } else {        [self clearHighlightView];    }    [super setHighlighted:highlighted];}@end


Instead of inserting a gradient layer, you can also override the method +layerClass to return the CAGradientLayer class. The layer of the button is than of that class, and you can easily set its colors etc.

+ (Class)layerClass {    return [CAGradientLayer class];}


I had a similar problem, however instead of a gradient, I had a image for a background. I solved it in the end using:

+ (void) styleButton:(UIButton*)button{CALayer *shadowLayer = [CALayer new];shadowLayer.frame = button.frame;shadowLayer.cornerRadius = 5;shadowLayer.backgroundColor = [UIColor whiteColor].CGColor;shadowLayer.opacity = 0.5;shadowLayer.shadowColor = [UIColor blackColor].CGColor;shadowLayer.shadowOpacity = 0.6;shadowLayer.shadowOffset = CGSizeMake(1,1);shadowLayer.shadowRadius = 3;button.layer.cornerRadius = 5;button.layer.masksToBounds = YES;UIView* parent = button.superview;[parent.layer insertSublayer:shadowLayer below:button.layer];}

The really interesting thing is that if you have a clearColor as the shadowLayer.backgroundColor is just didn't draw.