how to remove outline from my button without affecting any other styles

Question

i have a button which have some good ripple effect, that i want persist.

i want to remove the yellow marked one:

here is what i have tried:

button{
  background: #fff;
  color: #777;
  margin: 50px; 
  position:relative;
} 

/* button:link,button:visited{
  transition: all .2s;
  position:relative;
   padding:5px;
   background:#fff;
   color:black;
   display:inline-block;
}  */

button:hover{
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

button:active{
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  background:green;
}

button:after{
  content:"";
  position:absolute;
  display:inline-block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index: -1;
  transition: all .4s;
  background:green;
}
button:hover::after{
  transform: scaleX(1.4) scaleX(1.6);
  opacity:0;
  outline:none;
}

<button>
  hello world
</button>

how to produce:

click the button then you can see the outline

please help me thanks in advance !!!!

Answer 1

Set the outline property to none on the button

button{
  background: #fff;
  color: #777;
  margin: 50px; 
  position:relative;
  outline: none;
} 

/* button:link,button:visited{
  transition: all .2s;
  position:relative;
   padding:5px;
   background:#fff;
   color:black;
   display:inline-block;
}  */

button:hover{
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

button:active{
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  background:green;
}

button:after{
  content:"";
  position:absolute;
  display:inline-block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index: -1;
  transition: all .4s;
  background:green;
}
button:hover::after{
  transform: scaleX(1.4) scaleX(1.6);
  opacity:0;
  outline:none;
}

<button>
  hello world
</button>

Note that assigning outline a value of 0 or none will remove the browser's default focus style which can have accessibility conerns.