0

I styled a button as a link. When I click on it, a border appears. What css style could I use to remove this border please.

enter image description here

#but_edit {
  background: transparent;
  font-weight: bold;
  font-size: 12.8px;
  color: #095797;
  border: none;
  padding: 0px;
  margin-bottom: 24px;
  text-decoration: underline;
  box-shadow: 0rem 0rem 0px #fff;
  text-align: left;
  cursor: pointer;
}
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css">
<button class="edit_Button" id="but_edit" type="button">Change email address</button>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Nicolas
  • 167
  • 8
  • I reproduced your HTML and CSS and I don't see a border when I click. I'm not sure if it's just on my end or not. Did you try force refreshing your page with CTRL + F5 to see if the styles updated? Maybe there is some other CSS styling that's creating the border that's not in your post? – zayadur Apr 27 '22 at 18:54
  • Have you tried adding `outline: none;` to `input[type="button"]:focus`? https://stackoverflow.com/questions/19886843/how-to-remove-outline-border-from-input-button – gloo Apr 27 '22 at 18:57
  • I update my question – Nicolas Apr 27 '22 at 19:03
  • `#but_edit:focus { outline: none !important; }` resolved the problem. Thank you a lot :) – Nicolas Apr 27 '22 at 19:08

0 Answers0