Swift: Round UIButton with Blur background

Question

I am wanting to make a round UIButton but with a light blur effect with vibrancy as it's background

So far I've got a rounded UIButton, but the code I have found online (I'm new to iOS development so don't really understand how the blur etc works) to add a blur just puts it as the entire button's frame, essentially making the button appear square again.

I've also tried adding a view, then the UIButton and then the blur effect and applied the cornerRadius code to that view but it also didn't work.

Here is what I've tried:

    shortcutButton.layer.cornerRadius = 0.5 * shortcutButton.bounds.size.width // add the round corners in proportion to the button size

    let blur = UIVisualEffectView(effect: UIBlurEffect(style:
        UIBlurEffectStyle.Light))
    blur.frame = shortcutButton.bounds
    blur.userInteractionEnabled = false //This allows touches to forward to the button.
    shortcutButton.insertSubview(blur, atIndex: 0)

Paulinapauline

Answer 1

Add the following two lines of code to your project, before you add the subview:

blur.layer.cornerRadius = 0.5 * shortcutButton.bounds.size.width
blur.clipsToBounds = true

Enjoy! :)

Uhland

Amazing! Thanks for your help. I think I get it now :) How about making the Blur "vibrant"? – Paulinapauline