trying to have a button at the top of my page that scrolls to an article on the same page. when its clicked there is an unwanted blue square around the button.
ive tried so many combinations of :visited with outline: none; and text-decoration: none;
can anyone tell me the correct way I can remove the blue out line from this please
<a href="#article1" class="page-scroll">
<button class="btn btn-heading btn-lg">
<span class="fa fa-chevron-down"></span>
<span class="fa fa-chevron-down"></span>
<span class="fa fa-chevron-down"></span>
</button>
</a>
You can use 'outline: none' at a tag like below;
.page-scroll:active, .page-scroll:focus{
outline:none !important;
}
if above doesn't work. you can use like below;
.btn{outline:none !important;}
But if you do like this, web accessibility is lost. The a tag can't be focused with a tab key. So I hope that the outline can be stayed there.
The reason why I used !important. I think your CSS is overrided from another CSS. Please check the element with Chrome developer tools.