AppStore-like buttons (Facet buttons)

Facet buttons represent buttons with border and a clear background. Generally, their background is being changed on clicks together with the text color. You can see these buttons on AppStore.

Normal state:

Highlighted state:

Actually, there is no standard trick for customizing a button in that way, so I will share the way I used.

1) Create a button. Whether you do it programmatically or in the IB, do not forget to change its type to "<b>Custom</b>".

2) Customize its border.

button?.layer.borderWidth = 1.0
button?.layer.borderColor = self.tintColor?.CGColor
button?.layer.cornerRadius = 5.0
button?.layer.masksToBounds = true

3) Set tint's colors for two states (<b>Normal</b> and <b>Highlighted</b>).

button?.setTitleColor(self.tintColor, forState: UIControlState.Normal)
button?.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Highlighted)

4) Now we should care about button's background when highlighted. My application containing this type of buttons has the shared tint color, so it was necessary to use the same color. You can either create an image of needed color and use it or you can follow the way described below.

func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContext(size)
    color.setFill()
    var bounds = CGRectMake(0, 0, size.width, size.height)
    UIRectFill(bounds)

    let image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext()

    return image;
}

And set background image.

button?.setBackgroundImage(self.imageWithColor(self.tintColor!, size: button!.bounds.size), forState: UIControlState.Highlighted)

Enjoy! :)