css实现按钮触摸hover变色（三种方法）

CSS代码
来源：站三界导航
121阅读
2022-05-08

页面

基本节点写好：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./style.css" rel="styleSheet" type="text/css" />
</head>
<body>
    
    <div>
        <a class="btn btn-1">按钮一</a>
        <a class="btn btn-2">按钮二</a>
        <a class="btn btn-3">按钮三</a>
    </div>

</body>
</html>

先对样式 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;
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8356.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇： CSS：after实现斜边框

下一篇： CSS3实现360度循环旋转