| css实现按钮触摸hover变色（三种方法） | 您所在的位置：网站首页 › 鼠标放在上面div变颜色怎么办 › css实现按钮触摸hover变色（三种方法） |
css实现按钮触摸hover变色（三种方法）
|
页面
基本节点写好： Document 按钮一 按钮二 按钮三先对样式 reset ，并写好基础按钮样式 .btn ： * { margin: 0; padding: 0; box-sizing: border-box; } div { margin: 10%; } a { outline: 0; text-decoration: none; cursor: pointer; } .btn { padding: 10px 16px; background: #00a1d6; box-shadow: 0 4px 4px rgba(127, 127, 127, .3); display: inline-block; color: #fff; font-size: 16px; border-radius: 4px; transition: all 0.2s; margin: 20px; } 方法一：变色
CSS
.btn-1:hover {
background: #00b5e5;
}
方法二：高光
CSS
.btn-2:hover {
filter: brightness(1.1);
}
注：打高光比找变色简单，效果十分近似，但在很特殊的情况下，会影响到子节点带 filter：invert() 的元素，会使反色受到影响。 方法三：可见度
CSS
.btn-3 {
opacity: .8;
}
.btn-3:hover {
opacity: 1;
}
|
【本文地址】
公司简介
联系我们