如何改变css中点击按钮的动画效果?

问题描述 投票:0回答:1

当一个没有任何css样式的按钮被点击时,它会瞬间变成蓝色,然后恢复到正常的白色。

但是,当点击下图所示样式的按钮时,它的周围会出现一个蓝色的高光,并且直到点击屏幕上的其他东西才会消失。

我希望我的按钮没有这种奇怪的蓝色高光。我如何解决这个问题并保持按钮的风格?

到目前为止,我找到的任何解决方案都涉及到javascript,但我正在寻找一个纯css的解决方案。

<html>
<head>
<style>

  button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }

</style>
</head>
<body>

<button>click me.</button>

</body>
</html>
css button
1个回答
1
投票

这就是所谓的 focus 试试这个

button:focus {
    outline: none;
}

button {
      border: solid #316A8F;
      border-radius: 12px;
      background-color: #F9F9F9;
      color: #003C63;
  }
  
  button:focus {
    outline: none;
  }
<button>click me.</button>
© www.soinside.com 2019 - 2024. All rights reserved.