如何在不影响任何其他样式的情况下从我的按钮中删除轮廓

Question

我有一个button，它具有一些很好的涟漪效应，我想坚持下去。

我要删除标记为黄色的黄色：

这是我尝试过的事情：

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>

如何生产：

click按钮，然后您可以看到轮廓

请先帮助我，谢谢！！！

Answer 1

将按钮上的outline属性设置为none

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>

请注意，将轮廓的值设置为0或不设置将删除浏览器的默认焦点样式，该样式可能具有可访问性。