css中按钮聚焦效果

在Web开发中，按钮是我们常常需要用到的元素之一。为了提高用户体验，我们经常会为按钮添加一些视觉特效，而其中一个重要的特效就是聚焦效果。
CSS中添加聚焦效果非常简单，我们只需要在按钮元素上使用:focus伪类即可。下面是一个例子：

html
<p>例子1：</p>
<pre>
<button>无聚焦效果</button>
<button class="focus">有聚焦效果</button> 

css
button:focus {
  outline: 2px solid blue;
} 

在这个例子中，我们为两个按钮设置了不同的class，其中一个按钮具有聚焦效果。当我们在页面上点击“有聚焦效果”按钮，并且当前元素获取焦点时，就会显示一个2像素宽的蓝色边框。
为了更好的视觉体验，我们可以使用CSS属性box-shadow为按钮添加一些立体感，如下所示：

html
<p>例子2：</p>
<pre>
<button>无聚焦效果</button>
<button class="focus">有聚焦效果</button> 

css
button:focus {
  outline: 0;
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.8);
} 

在这个例子中，我们为按钮添加了一个8像素半径的rgba颜色为蓝色的立体阴影，当聚焦时，阴影会显示出来。
除了改变边框和阴影之外，我们还可以改变按钮的背景颜色、字体颜色等属性，以便在用户点击时更明显地传达聚焦状态。
在实际项目中，按钮聚焦效果也是一个非常实用的功能。我们可以利用按钮聚焦效果来提高用户体验，帮助用户更好地进行操作。