首先，在CSS样式表中添加按钮的基本样式：
<button >按钮</button>.button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}上面的代码定义了一个绿色的按钮，现在我们来添加选中状态的样式。
当按钮被选中时，可以使用CSS伪类选择器“:active”来实现。我们为选中状态的按钮添加一个不同的背景颜色，比如灰色：
.button:active {background-color: #7a7a7a;}上述代码表示，在按钮被选中时，按钮的背景颜色将变成灰色。这样，当用户点击按钮时，按钮的背景颜色将从绿色切换为灰色，以提供视觉上的反馈。
除了使用“:active”伪类选择器，我们还可以使用“:focus”伪类选择器来实现按钮选中状态的变色效果。使用“:focus”伪类选择器，可以在用户使用Tab键将焦点移到按钮上时，为该按钮添加一个选中状态的样式，比如蓝色的边框：
.button:focus {outline: none;box-shadow: 0 0 10px #00BFFF;}上述代码表示，当用户在按钮上使用Tab键将焦点移到按钮上时，该按钮将会被添加一个蓝色的边框。这样，用户就可以清楚地看到自己正在选中哪一个按钮了。
总的来说，为按钮添加选中状态的变色效果是非常有必要的，因为这可以提供更好的用户交互体验。通过使用CSS伪类选择器，我们可以很方便地实现按钮的选中状态的变色效果，让用户更加清楚地知道自己当前选中的是哪一个选项。
上一篇：javascript中判断范围
下一篇：javascript中国地图区域划分
