I resolved this issue and I just wanted to post how and more details.
The issue was only happening in Google Chrome. Also I am using the wp-bootstrap-4 theme and I have created my child theme from that.
To resolve, I added the following code in the CSS panel for the CTA Image widget:
a:focus, button:focus, input:focus, textarea:focus {
outline: none;
}
A quick google search led me to this page which gives a brief explanation of this symptom which is actually a focus issue not a button:active which is what I originally thought.
Remove Focus Border from Chrome
I’m primarily a backend developer, so my experience with CSS is minimal, therefore I hope this information will be helpful to others in the future.
