效果
文字切换.gif
html
使用button主要是因为button点击之后可以获取焦点，可以保持打开（文字颜色为白色）状态
<button class="light">light text</button>
<button class="light">light text</button>
<button class="light">light text</button>
CSS
主要是使用transition动画，使得切换的时候文字颜色包含动画效果
/*文字默认颜色和失去焦点时的颜色*/
.light {
display: inline-block;
outline: none;
padding: 1rem 2rem;
border: 1px solid #333333;
background-color: #333333;
color: #888888;
transition: color 150ms linear; /*文字颜色变化时添加动画*/
}
/*鼠标滑过和点击时文字颜色变为白色*/
.light:hover,
.light:active,
.light:focus {
color: #fff;
transition: color 150ms linear; /*文字颜色变化时添加动画*/
}
