CSS3中的按钮高亮效果可以通过使用:hover伪类和box-shadow属性来实现。在按钮被鼠标悬浮时,就会触发:hover伪类样式,从而产生高亮效果。
例如,我们可以创建一个普通按钮的CSS样式:
button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }然后,我们可以使用:hover伪类来创建按钮的高亮效果:
button:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }在上面的代码中,我们使用了box-shadow属性来添加按钮的高亮效果。box-shadow属性有四个值,分别是水平偏移量、垂直偏移量、模糊半径和阴影颜色,我们可以根据需要自己调整这些值。 除了box-shadow属性,我们还可以使用其他CSS属性来改变按钮的高亮效果,例如background-color、opacity、transform等。 总的来说,使用CSS3可以轻松实现按钮高亮效果,让我们的网站更加具有动感和现代感。