A UIButton Subclass – Creating Glossy Buttons Without Images

In my latest iOS app, I created a simple subclass to add a glossy effect to UIButtons. In this tutorial, I’ll walk you through the steps of creating that subclass and implementing it in your code.

Getting Started

First create a new project using the Single View Application template and call it GlossyButtons. Make sure Automatic Reference Counting is checked off.
Screen Shot 2013-02-02 at 6.47.14 PM
Screen Shot 2013-02-02 at 6.48.23 PM

Next add a new file to your project using the Objective-C Class template. Call it GlossyButtons and make it a subclass of UIButton.
Screen Shot 2013-02-02 at 6.49.43 PM
Screen Shot 2013-02-02 at 6.51.08 PM

You’ll need to add the QuartzCore.framework to your project for the glossy effect.
Screen Shot 2013-02-02 at 7.04.24 PM
Screen Shot 2013-02-02 at 7.04.51 PM

Next, open GlossyButton.h file and add the following code:

#import <UIKit/UIKit.h>

@interface GlossyButton : UIButton
- (id)initWithFrame:(CGRect)frame withBackgroundColor:(UIColor*)backgroundColor;
@end

In GlossyButton.m, you’ll need to be sure to import the QuartzCode framework and add the following code:

#import "GlossyButton.h"
#import <QuartzCore/QuartzCore.h>

@implementation GlossyButton

- (id)initWithFrame:(CGRect)frame withBackgroundColor:(UIColor*)backgroundColor
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        [self makeButtonShiny:self withBackgroundColor:backgroundColor];
    }
    return self;
}

- (void)makeButtonShiny:(GlossyButton*)button withBackgroundColor:(UIColor*)backgroundColor
{
    // Get the button layer and give it rounded corners with a semi-transparant button
    CALayer *layer = button.layer;
    layer.cornerRadius = 8.0f;
    layer.masksToBounds = YES;
    layer.borderWidth = 2.0f;
    layer.borderColor = [UIColor colorWithWhite:0.4f alpha:0.2f].CGColor;
    
    // Create a shiny layer that goes on top of the button
    CAGradientLayer *shineLayer = [CAGradientLayer layer];
    shineLayer.frame = button.layer.bounds;
    // Set the gradient colors
    shineLayer.colors = [NSArray arrayWithObjects:
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.75f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.4f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         nil];
    // Set the relative positions of the gradien stops
    shineLayer.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.8f],
                            [NSNumber numberWithFloat:1.0f],
                            nil];
    
    // Add the layer to the button
    [button.layer addSublayer:shineLayer];
    
    [button setBackgroundColor:backgroundColor];
}

@end

When initializing a new Glossy Button you’ll need to provide the background color for the button. The method makeButtonShiny gives the button rounded corners and adds a shiny top layer to give the button a glossy effect.

Implementation

Open ViewController.m and add #import GlossyButton.h at the top. Creating a glossy button is as simple as initializing a new GlossyButton and adding it to your view. Copy the following code:

#import "ViewController.h"
#import "GlossyButton.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    CGRect rect = CGRectMake(86,252,148,44);
    GlossyButton *glossyBtn = [[GlossyButton alloc] initWithFrame:rect withBackgroundColor:[UIColor redColor]];
    [self.view addSubview:glossyBtn];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

Run this in your simulator or your device and you should see a shiny red button created without an image. Full Source Code

GlossyBtn

3 thoughts on “A UIButton Subclass – Creating Glossy Buttons Without Images

  1. Have you ever thought about publishing an ebook or guest authoring on other blogs? I have a blog based on the same information you discuss and would love to have you share some stories/information. I know my visitors would value your work. If you’re even remotely interested, feel free to send me an e mail.

  2. Hey there just wanted to give you a quick heads up. The text in your article seem to be running off the screen in Firefox. I’m not sure if this is a format issue or something to do with web browser compatibility but I thought I’d post to let you know. The design and style look great though! Hope you get the issue resolved soon. Many thanks|

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      
 

*