Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIButton shadow on all 4 sides

I am trying to generate shadow for a UIButton.

Below is what I am using.

myButton.layer.shadowColor = [UIColor blackColor].CGColor;
myButton.layer.shadowOpacity = 0.5;
myButton.layer.shadowRadius = 1;
myButton.layer.shadowOffset = CGSizeMake(4, 4);
myButton.layer.masksToBounds = NO;

But its generating shadow on right and bottom.

Is there way where I can have shadow on all 4 sides?

As an another solution, I am do this by putting image with shadow behind the button, but I don't want to go that way.

Is there any way to get this done programmatically?

Something like below.

enter image description here

like image 711
Fahim Parkar Avatar asked Jan 10 '23 09:01

Fahim Parkar


1 Answers

Since you offset the shadow by {4, 4} the shadow appears on the bottom-right side of the button. You could set a zero offset :

myButton.layer.shadowOffset = CGSizeZero

and by tweaking the shadowRadius you might achieve what you want.

Here is how a shadow is built:

(1st row) start from your button's shape

(2nd row) draw a black shape underneath your button and translate it by the amount specified in shadowOffset : 10px on the left, 0px on the right. On the right one you can't see the black rectangle as it's directly underneath the button

(3rd row) blur the black rectangle by the amount specified in blurRadius. Zero means no blur and the black rectangle would stay sharp, so if you don't offset and don't blur, you'll see nothing.

enter image description here

like image 170
Cyrille Avatar answered Jan 22 '23 04:01

Cyrille