CSS 按钮悬停样式

button 按钮悬停样式

button定义的按钮的悬停样式,可以通过CSS中的:hover伪类选择器来进行匹配选择处于鼠标悬停状态的按钮,然后设置相关的按钮的样式,比如大小、背景颜色等等。比如下方实例的试一试按钮的悬停的背景色样式可以从原来的skyblue转换为blue,呈现出一个动态的过程。


语法

buttonSelect:hover{样式设置}

提示:buttonSelect为一个CSS的选择器,可以是元素选择器、类选择器、id选择器等等,用于选择button元素。


按钮悬停样式实例代码,及在线编辑器

下方实例在线运行之后,鼠标悬停与按钮之上,将改变按钮的大小和背景颜色:

<button id='b1'>按钮</button>

<style>
  #b1{padding:2%;}
  #b1:hover{background-color:skyblue;padding:5%;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.