2

On load my page or click the button, for some reason html applies some border to the button.

enter image description here

<div class="like-dislike">
<button class="button-like-dislike" id="likebtn24">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="likeinput24" value="0" name="">
<button class="button-like-dislike" id="dislikebtn24">
<i class="fa fa-thumbs-down" aria-hidden="true"></i>
</button>
<input class="input-like-dislike" id="dislikeinput24" value="0" name="">
</div>
Alex Duthie
  • 34
  • 1
  • 9
Lucca
  • 55
  • 6
  • If you share the contents of the CSS classes referenced, perhaps it'll be easier to get help. – Renato Silva Mar 09 '21 at 23:05
  • Thats probably an css outline.. look here: https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome – Goran.it Mar 09 '21 at 23:17

4 Answers4

1

You should be able to prevent that by setting the outline to 'none' inside the CSS.

OUTLINE

button {
     outline: none;
}

Remember to still show the user that the button has successfully been clicked though with :hover or :active

HOVER

button:hover {
     /*CSS*/
}

ACTIVE

button:active {
     /*CSS*/
}
Alex Duthie
  • 34
  • 1
  • 9
0

See if removing the outline fixes it. Although, you'll likely want some sort of way to indicate the button is selected/ highlighted for accessibility purposes, such as a slight change in color.

button:focus, button:hover{
    outline: none;      
}
Matt Allen
  • 15
  • 5
0

Try this if its work for you,

.button-like-dislike:hover , .button-like-dislike:focus , .button-like-dislike:active {
    outline: none;
}
Cognisun Inc
  • 438
  • 3
  • 9
0

button button className{ outline: none; }

Iron Man
  • 35
  • 3