Rak_code Rak_code - 9 days ago 5
CSS Question

hide that selected border

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

enter image description here

I used

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

enter image description here



.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?

Answer

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>

Comments