6

I am trying to recreate a button like this in Swift: Glowing Button Effect

I have been able to create the gradient inside of the button accurately from Sketch using the help from here: Answered Question

Now I am trying to recreate the glow effect behind the button. I was thinking creating a subview behind it and using a gaussian blur filter to draw it. Now I am stuck in how to implement this, and haven't found a good solution. The normal CALayer shadow doesn't work with gradients, and I am lost. Any help is appreciated

surfaspen
  • 391
  • 7
  • 17

1 Answers1

7

You can do it like this

Init your gradient layer

let gradientLayer = CAGradientLayer.init()

gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.yellow.cgColor,
                        UIColor.green.cgColor,
                        UIColor.blue.cgColor]

gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

Set preferable size for example 40 from button's frame

gradientLayer.frame = CGRect.init(
x: button.frame.minX - 40,
y: button.frame.minY - 40, 
width: button.frame.width + 80, 
height: button.frame.height + 80)
gradientLayer.masksToBounds = true

Init shadow layer

let shadowLayer = CALayer.init()
shadowLayer.frame = gradientLayer.bounds
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOpacity = 0.08
shadowLayer.shadowRadius = 20
shadowLayer.shadowPath = CGPath.init(rect: shadowLayer.bounds, transform: nil)

Set the shadow layer as a mask for gradient layer

gradientLayer.mask = shadowLayer

Insert gradient layer in button's superView below button's layer

backgroungView.layer.insertSublayer(gradientLayer, below: button.layer)
Vitaly Migunov
  • 4,297
  • 2
  • 19
  • 23
  • Thank you so much! This helped me understand it completely! – surfaspen Jul 22 '17 at 18:45
  • Yea it works, but the only issue is that when pressing the button the shadow layer darkens more, and as the user keeps pressing the shadow layer eventually just becomes the same as the gradient layer – surfaspen Jul 24 '17 at 00:27
  • It's shouldn't work like that where did you put this layer? The layer should not be inside the button – Vitaly Migunov Jul 24 '17 at 11:14
  • I put this layer in a function that is an extension to UIButton. The extension has a function to create the gradient and then create the shadow layer behind it. This function in the extension is being called in the 'layoutSubviews()' function of the button. – surfaspen Jul 24 '17 at 14:59
  • Your problem is that you creating a new layer every time when you press the button because you call your code from layoutSubviews – Vitaly Migunov Jul 24 '17 at 15:48
  • Ah, thank you. I thought layoutSubviews was only called when the view loaded. I didn't realize it's called again when pressed – surfaspen Jul 24 '17 at 18:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150034/discussion-between-vitaly-migunov-and-surfaspen). – Vitaly Migunov Jul 24 '17 at 23:28