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

【问题标题】：how to remove outline from my button without affecting any other styles [duplicate]如何在不影响任何其他样式的情况下从我的按钮中删除轮廓[重复]
【发布时间】：2018-08-20 16:48:15
【问题描述】：

我有一个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这个按钮就可以看到轮廓了

请帮助我提前谢谢！！！！

【问题讨论】：

标签： html css

【解决方案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 或无将删除浏览器的默认焦点样式，该样式可能具有辅助功能。

【讨论】：