insertSubview() covers the whole Mainview even though inserted at 0 - swift

Question

I insert a UIView into a UIButton with following code:
let backgroundView = UIView()
backgroundView.backgroundColor = .red
backgroundView.translatesAutoresizingMaskIntoConstraints = false
blueButton.insertSubview(backgroundView, at: 0)
NSLayoutConstraint.activate([
backgroundView.leadingAnchor.constraint(equalTo: blueButton.leadingAnchor),
backgroundView.trailingAnchor.constraint(equalTo: blueButton.trailingAnchor),
backgroundView.topAnchor.constraint(equalTo: blueButton.topAnchor),
backgroundView.bottomAnchor.constraint(equalTo: blueButton.bottomAnchor)
])
The promlem is that the backgroundView covers the whole button and I only see the red field instead of the button (its an image) with a red background (my subView).
This is the storyboard part of my image. I don´t do something else in the code with this buttons with the exception of trying to put a subView into:
My goal is to have a circle background like in the picture below. For example the red circle button has a rounded red (but brighter than the buttons red) backgroundView.The standard background of the button should stay the same.
I also tried to send the subView into the background but it didn´t work for me:
blueButton.sendSubviewToBack(backgroundView)
I reduced the alpha value of the subview to see if the button image is still there.
for view in blueButton.subviews {
view.alpha = 0.5
}
And it is:
How can I solve this problem?

Answer 1

Do not inject extra subviews into a button. If the goal is to make the background color of the button red, set its backgroundColor to .red. If the goal is to put something behind the button image, that is what the backgroundImage is for. Or just make the button image look like the image you really want.
I made this button:
It looks a lot like your picture. Here's the code:
let im = UIGraphicsImageRenderer(size: CGSize(width: 30, height: 30)).image {
ctx in
UIColor.red.withAlphaComponent(0.2).setFill()
ctx.cgContext.fillEllipse(in: CGRect(x: 0, y: 0, width: 30, height: 30))
UIColor.red.setFill()
ctx.cgContext.fillEllipse(in: CGRect(x: 5, y: 5, width: 20, height: 20))
}
b.setImage(im.withRenderingMode(.alwaysOriginal), for: .normal)
I think that's a lot better than messing with unwanted illegal subviews.