How to hide border from Input Button, Bootstrap conflict

Question

I tried to make a fab like Material Design fab button.

I used border-radius to make it circle shape, but after that when I click on that it is selecting as square like this:

.fab {
  border-radius: 50%;
  border: 0;
  color: #000;
  margin: auto;
  padding: auto;
  vertical-align: middle;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5);
  position: fixed !important;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  -webkit-user-select: none;
}

.fab.big {
  width: 50px;
  height: 50px;
}

<button class="fab big white ripple red-ripple">
  <i style="font-size:18px;"
     class="material-icons">
    add
  </i>
</button>

I want a fab button to be like this: Material Design Lite Buttons

I also tried -webkit-user-select: none but it did not work.

Same thing is also happening with normal buttons, how can I fix this?

Research *CSS shapes*. Other than that, any element in HTML will always be a rectangle. — connexo, Nov 24 '16 at 18:53
yeah, I know, but I want to hide that selected border that's it — rakcode, Nov 24 '16 at 18:55
Possible duplicate of [How to hide button outline](http://stackoverflow.com/questions/29453288/how-to-hide-button-outline) — JSouthward, Nov 24 '16 at 19:19

score 0 · Accepted Answer · answered Nov 24 '16 at 19:09

As mentioned in the comments outline: none; can be used to prevent the square border being shown on click.

.fab{
border-radius:50%; 
border:0; 
color:#000; 
margin: auto; 
padding:auto; 
vertical-align: middle; 
box-shadow:0px 2px 7px rgba(0,0,0,0.5); 
position:fixed !important; 
right:20px; 
bottom:20px;
z-index:100;
-webkit-user-select:none;
  outline: none;
}

.fab.big{
width:50px; 
height:50px; 
}

<button class="fab big white ripple red-ripple"><i style="font-size:18px;" class="material-icons">add</i></button>

How to hide border from Input Button, Bootstrap conflict

1 Answers1