iOS UIButton how does one make beautiful buttons like this?

Question

Is this a UIButton? If it is, how is the background red done? Obviously, it is not red UIColor? Is there same tool or utility included with Xcode to allow making buttons like this?

enter image description here

possible duplicate of [How do I programmatically provide a glossy look to UIButtons?](http://stackoverflow.com/questions/3709183/how-do-i-programmatically-provide-a-glossy-look-to-uibuttons) — Brad Larson, Oct 29 '11 at 13:01

score 15 · Accepted Answer · answered Oct 28 '11 at 15:37

You can generate similar buttons with private class UIGlassButton. I saw it first here http://pastie.org/830884 by @schwa.

Run an app with this code in your iOS simulator to create a custom button (or in the device, save to $(APP)/Documents and enable iTunes file sharing).

Class theClass = NSClassFromString(@"UIGlassButton");
UIButton *theButton = [[[theClass alloc] initWithFrame:CGRectMake(10, 10, 120, 44)] autorelease];
// Customize the color
[theButton setValue:[UIColor colorWithHue:0.267 saturation:1.000 brightness:0.667 alpha:1.000] forKey:@"tintColor"];
//[theButton setTitle:@"Accept" forState:UIControlStateNormal];
[self.view addSubview:theButton];

UIGraphicsBeginImageContext(theButton.frame.size);
CGContextRef theContext = UIGraphicsGetCurrentContext();
[theButton.layer renderInContext:theContext];

UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
NSData *theData = UIImagePNGRepresentation(theImage);
[theData writeToFile:@"/Users/<# your user #>/Desktop/button.png" atomically:NO];
UIGraphicsEndImageContext();

Once you obtain the png, use it as button background.

Alternatively, you can build the buttons programmatically (by Jeff Lamarche).

@geekyaleks - Just be aware that using a private class like this may get your application rejected from the App Store. It might be a safer bet to use one of the programmatic solutions out there for adding gloss to a button. I don't know that I've heard of any rejections for using UIGlassButton, but that doesn't mean Apple won't reject this in the future. Also, they could change the class name in a future OS update and your buttons would no longer look right. — Brad Larson, Oct 29 '11 at 13:16
@BradLarson The class isn't used in the app, just to create the PNG. — Ben Flynn, Aug 23 '12 at 03:31
Would it bother the Apple reviewers that we're using images taken from their software? We're technically rendering them ourselves, but we're playing by their rules. — sudo, May 13 '14 at 03:57

score 5 · Answer 2 · edited May 23 '17 at 12:16

I wrote a couple of classes to generate buttons for a calculator I wrote. The classes generate the buttons based upon either standard colors or with RGB input RGB values. The buttons are in my BindleKit project on Github: https://github.com/bindle/BindleKit

My answer to Change UIButton background color describes how to use the classes and where to find the source.

To see examples of the buttons, compile the BKCatalog app in the Github project or look at the screenshot https://github.com/bindle/BindleKit/blob/master/screenshots/BKCatalog-BKButtons.png

score 4 · Answer 3 · edited Apr 01 '13 at 14:54

4

You can make a button like that with core animation layers.

http://www.cimgf.com/2010/01/28/fun-with-uibuttons-and-core-animation-layers/

edited Apr 01 '13 at 14:54

Marcus Adams

53,009
9
91
143

answered Oct 28 '11 at 15:28

logancautrell

8,762
3
39
50

I have actually used this technique elsewhere, but it never comes out quite looking as good as the pic I included. This is a "glassy" back end, with a strong transition.. I was hoping that Xcode would have a graphics utility just for making buttons like this.. I guess, I need to talk to a graphic artist.. – geekyaleks Oct 28 '11 at 15:53
Downvote because the buttons generated with these techniques do NOT look anywhere as good as the example provided in the question. – Mason G. Zhwiti Aug 15 '12 at 04:41
@mason Actually they do produce images that look as good as the one above. I guess you aren't proficient enough to use them properly, I feel sorry for you. – logancautrell Aug 15 '12 at 18:02
@logancautrell No offense. But care to share examples that look as good? All I can go by is the examples shown on the pages provided. They do not produce results anywhere near as good as standard, graphics-backed buttons, like the one in this question. In the case of the second link, the examples show the gradient is applied on top of the text, which looks terrible. If someone has been able to produce buttons that look just as good with the technique in the first link, I haven't seen it yet, and I'd love to. It would save me hours of time with graphics-based button creation. – Mason G. Zhwiti Aug 15 '12 at 22:24

zaph · Answer 4 · 2011-10-28T15:37:28.053

4

You need to create a background image for the button.

Then add the image to the button:

- (void)setImage:(UIImage *)image forState:(UIControlState)state

Also for resizable buttons see:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

You can use programs like Graphics Converter, Photoshop and others.

edited Oct 28 '11 at 15:37

answered Oct 28 '11 at 15:30

zaph

111,848
21
189
228

score 4 · Answer 5 · answered Oct 28 '11 at 17:27

4

And under iOS 5, you have UIAppearance.

answered Oct 28 '11 at 17:27

David Dunham

8,139
3
28
41

iOS UIButton how does one make beautiful buttons like this?

5 Answers5