iOS Button with round corners and a shadow

Question

I have searched and tried the various solutions but without success. What I would like is a button background with rounded corners and a shadow. I can make one or the other happen but not both at the same time. Any help would be very welcome.

viewDepositButton_.layer.cornerRadius = 5.0;
CAGradientLayer *viewLayer = [CAGradientLayer layer];
[viewLayer setColors:aloColors];
[viewLayer setFrame:viewDepositButton_.bounds];
[viewDepositButton_.layer insertSublayer:viewLayer atIndex:0];
viewDepositButton_.clipsToBounds = YES;

viewDepositButton_.layer.shadowColor = [UIColor colorWithRed:0.46 green:0.46 blue:0.46 alpha:1.0].CGColor;
viewDepositButton_.layer.shadowOpacity = 0.8;
viewDepositButton_.layer.shadowRadius = 8;
viewDepositButton_.layer.shadowOffset = CGSizeMake(8.0f, 8.0f);

I'd call your methods maybe after you set your properties! [viewDepositButton_.layer insertSublayer:viewLayer atIndex:0]; [viewDepositButton_ viewLayer];} should be called way later. — apollosoftware.org, Jul 07 '16 at 17:25
Please look at it http://stackoverflow.com/questions/4754392/uiview-with-rounded-corners-and-drop-shadow — Alexander Khitev, Jul 07 '16 at 18:28

score 5 · Answer 1 · answered Jul 08 '16 at 00:14

viewDepositButton_.clipsToBounds = YES; or viewDepositButton_.layer.masksToBounds = YES; will clip everything outside your layer - including the shadow.

However you have few options:

Put your button under a parent view, which will have the same corner radius and the shadow you want, but will have clipsToBounds = NO. This way you'll have your button as a subview of a view which has the shadow.
Use an image for your button, which has the rounded corners and set your buttons clipsToBounds to NO

Hope this helps

score 2 · Accepted Answer · answered Jul 07 '16 at 17:20

I was able to get your code to work by the following and it looks fine. Make sure you call your methods in proper sequence.

        viewDepositButton_.layer.cornerRadius = 5.0;
        viewDepositButton_.layer.borderWidth = 1.0;
        viewDepositButton_.layer.shadowColor = [UIColor colorWithRed:0.46 green:0.46 blue:0.46 alpha:1.0].CGColor;
        viewDepositButton_.layer.shadowRadius = 8;
        viewDepositButton_.layer.shadowOpacity = 0.8;
        viewDepositButton_.layer.shadowOffset = CGSizeMake(8.0f, 8.0f);

        CAGradientLayer *viewLayer = [CAGradientLayer layer];
        [viewLayer setColors:aloColors];
        [viewLayer setFrame:viewDepositButton_.bounds];
        [viewDepositButton_.layer insertSublayer:viewLayer atIndex:0];
        [viewDepositButton_ viewLayer];}

At first glance that works however if you look closely at the button the corners are not rounded and extend out of the border. For now I think I may have to give up on the gradient and just use a plain colour. — , Jul 08 '16 at 09:14
I have found a way to make it work. What I needed to do to your code above was remove the border as I didn't want that and then add [viewLayer setCornerRadius:5.0f]; when defining the gradient layer. — , Jul 08 '16 at 09:21

score -1 · Answer 3 · answered Jul 07 '16 at 17:16

Here is my code for setting up a rounded corner button with shadow.

button.layer.cornerRadius = 15;
button.layer.shadowRadius = 2.0f;
button.layer.shadowColor = [UIColor lightGrayColor].CGColor;
button.layer.shadowOffset = CGSizeMake(-1.0f, 3.0f);
button.layer.shadowOpacity = 0.8f;
button.layer.masksToBounds = NO;

Overall, the code is pretty straightforward. Please comment if you have any question, concerns or bugs.

iOS Button with round corners and a shadow

3 Answers3