[分享]css3按钮交互效果

< p > CSS3按钮交互效果 < pre > 按钮是网页中常用的一个交互元素。如果可以增加一些好看的动态效果，可以吸引更多用户的注意力。下面将介绍一些常见的CSS3按钮交互...

< p > CSS3按钮交互效果

< pre > 按钮是网页中常用的一个交互元素。如果可以增加一些好看的动态效果，可以吸引更多用户的注意力。下面将介绍一些常见的CSS3按钮交互效果。
1. 悬停效果：当用户鼠标经过按钮时，按钮会发生一些变化。这种效果可以通过:hover伪类来实现。
.example-button{ background-color: #FF6666; color: #ffffff; border: none; border-radius: 5px; padding: 10px 20px; }
.example-button:hover{ background-color: #ffffff; color: #FF6666; border: 2px solid #FF6666; }
2. 点击效果：当用户点击按钮时，按钮会发生另一些变化。这种效果可以通过:active伪类来实现。
.example-button{ background-color: #FF6666; color: #ffffff; border: none; border-radius: 5px; padding: 10px 20px; }
.example-button:active{ background-color: #ffffff; color: #FF6666; border: 2px solid #FF6666; }
3. 过渡效果：当按钮被点击并释放时，按钮会慢慢回到原来的状态。这种效果可以通过transition属性来实现。
.example-button{ background-color: #FF6666; color: #ffffff; border: none; border-radius: 5px; padding: 10px 20px; transition: all 0.2s ease-out; }
.example-button:active{ background-color: #ffffff; color: #FF6666; border: 2px solid #FF6666; transition: all 0.2s ease-in; }
4. 鼠标离开效果：当用户鼠标离开按钮时，按钮会回到原来的状态。这种效果可以通过transition和透明度opacity属性来实现。
.example-button{ background-color: #FF6666; color: #ffffff; border: none; border-radius: 5px; padding: 10px 20px; transition: all 0.2s ease-out; }
.example-button:hover{ background-color: #ffffff; color: #FF6666; border: 2px solid #FF6666; transition: all 0.2s ease-in; }
.example-button:active{ opacity: 0.5; transition: all 0.2s ease-in; }