Search code examples
iosobjective-ciphoneuibuttonrounded-corners

Rounded UIButton with dark effect

I need to create gradient buttons with rounded corners and black shadow inside as in screenshot. Any help would be much appreciated.

enter image description here

Solution

  • Actually it's not a black shadow. The shadow is more like a bright version of the button's base color. The button itself has a dark (black) border.

    To achieve this, you might do the following.

    1. Download this project: https://github.com/inamiy/YIInnerShadowView

    2. The important class is YIInnerShadowLayer. Add that to your project.

    3. To reproduce the exact effect, you should change the color of the shadow. Do this in the init method of YIInnerShadowLayer. Even better, provide a new init method that takes a UIColor as its argument and assigns that to the shadowColor property. A very generic approach would be to set the shadowColor to white.

    4. Add an instance of that class to your view (button, label, whatever, but let's call it myView for now). To see how to add that layer, you can look in the _init method of YIInnerShadowView.

    5. Set the frame of the new layer to the bounds of myView.

    6. For the rounded corners do myView.layer.cornerRadius = 5;

    7. For the black border do myView.layer.borderWidth = 2; myView.layer.borderColor = [UIColor blackColor].CGColor;

    Feel free to ask if something is unclear.

    My end result:

    enter image description here