Social icons as a button - can't remove background color

I’m stuck and can’t figure this out: I have some social icons which have links (new browser tab). After clicking the link, there is a grey box around the icon with a light blue border. (see the Twitter button on the attached screenshot.

I can’t get rid of this. Could this be a visited state?

Which brings me to something I will add to the wish list for a future update: if Blocs gives me access to change the normal, hover and active states of things, why can’t I change the visited state also? Showing a link has been visited is important to usability.

Hi @gary

This is strange. On the two site links you provided in the other posts there is no issue at least in Safari.

That leads to my question on which browser(s) are you experiencing this issue ?

MDS

Yep it is in Chrome and Firefox.

This may help… but not sure.

.button:focus { 
outline: none !important; 
}

MDS

Thanks MDS, I’ll give that a try and let you know!

Evidently, this has already been implemented in the Blocs standard style.css file:

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
color:#FFF;
background:rgba(0,0,0,.3);
}

/* Prevent ugly blue glow on chrome and safari */
button{
outline: none!important;
}

For some reason, it doesn’t seem to work … ?? I will keep researching :wink:

So was a bit tricky, but I finally got rid of the “ugly blue outline” is set by chrome. actually it’s not an outline, it’s a box-shadow. (That also explains why the code in the standard blocs style.css didn’t have any effect.)

Anyway, for some reason I couldn’t get the box-shadow zeroed out using css stuff like button:focus { box-shadow:none;}

here’s what I did: I already had a custom class called “claire-social-button” which I used to style the social buttons. Using the class editor I set all box shadows to 0% opacity. But since Blocs class editor doesn’t let you add or write any special pseudo css (focus), I created an external CSS file with this line of code:

.claire-social-button:focus{
box-shadow:0px 0px 0px rgba(0,0,0,0.0);
}

This got rid of the blue outline/shadow that chrome adds.

I attached the external CSS file in the global site settings under “project attachments”, so that way I don’t have to add it to every individual page.

Now I know, our usability friends will point out that the blue shadow is there for a reason. I.E. people who can’t use a mouse need to know which button they’re navigating to via the keyboard. Maybe I’ll find a way to just hide the blue shadow when using a mouse.

1 Like

Hi @gary

Thank you for sharing your solution and glad you found how.

MDS

you’re welcome!