文章最后更新时间：2024年08月29日

仿玻璃效果按钮源码

一款仿玻璃效果CSS按钮源码，漂亮且简约，可用于导航菜单。使用了 Font Awesome 图标库中的图标，请自行替换。<link rel="stylesheet" href="./boli.css"> 此处 ./boli.css 改成自己保存的CSS名称。

演示：

仿玻璃效果按钮源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>玻璃效果按钮源码</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="./boli.css">
</head>

<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <ul>
            <li>
                <a href=""><i class="fa fa-qq" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href=""><i class="fa fa-weixin" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href=""><i class="fa fa-weibo" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href=""><i class="fa fa-tencent-weibo" aria-hidden="true"></i></a>
            </li>
            <li>
                <a href=""><i class="fa fa-telegram" aria-hidden="true"></i></a>
            </li>
        </ul>
    </div>
</body>

</html>

* {
    margin: 0; /* 重置默认外边距 */
    padding: 0; /* 重置默认内边距 */
    box-sizing: border-box; /* 设置盒模型为边框模型 */
}

.container {
    position: absolute; /* 绝对定位 */
    width: 100%; /* 宽度100% */
    height: 100vh; /* 高度100%视口高度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background: linear-gradient(to bottom, #2193b0, #6dd5ed); /* 背景线性渐变色 */
}

.container::before {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    bottom: 0px; /* 底部位置为0px */
    width: 100%; /* 宽度100% */
    height: 50%; /* 高度50% */
    z-index: 1; /* 层级为1 */
    border-top: 1px solid rgba(255, 255, 255, 0.5); /* 顶部边框 */
    backdrop-filter: blur(5px); /* 模糊背景 */
}

.container .color {
    position: absolute; /* 绝对定位 */
    filter: blur(200px); /* 模糊效果 */
}

.container .color:nth-child(1) {
    background: #2193b0; /* 背景颜色 */
    width: 800px; /* 宽度800px */
    height: 800px; /* 高度800px */
    top: -450px; /* 顶部位置为-450px */
}

.container .color:nth-child(2) {
    background: #2193b0; /* 背景颜色 */
    width: 600px; /* 宽度600px */
    height: 600px; /* 高度600px */
    bottom: -150px; /* 底部位置为-150px */
    left: 100px; /* 左侧位置为100px */
}

.container .color:nth-child(3) {
    background: #2193b0; /* 背景颜色 */
    width: 400px; /* 宽度400px */
    height: 400px; /* 高度400px */
    bottom: 50px; /* 底部位置为50px */
    right: 100px; /* 右侧位置为100px */
}

ul {
    position: relative; /* 相对定位 */
    display: flex; /* 使用flex布局 */
    z-index: 2; /* 层级为2 */
}

ul li {
    position: relative; /* 相对定位 */
    list-style: none; /* 移除列表样式 */
    margin: 10px; /* 外边距 */
}

ul li a {
    position: relative; /* 相对定位 */
    width: 80px; /* 宽度80px */
    height: 80px; /* 高度80px */
    display: inline-block; /* 行内块级元素 */
    border-radius: 10px; /* 设置圆角 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-decoration: none; /* 移除文本装饰 */
    color: #fff; /* 文本颜色 */
    font-size: 32px; /* 字体大小 */
    border: 1px solid rgba(255, 255, 255, 0.4); /* 边框 */
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* 右侧边框 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
    box-shadow: 0px 5px 45px rgba(0, 0, 0, 0.1); /* 设置阴影效果 */
    backdrop-filter: blur(2px); /* 模糊背景 */
    transition: all 0.5s; /* 添加过渡效果 */
    overflow: hidden; /* 隐藏溢出内容 */
}

ul li a:hover {
    transform: translateY(-20px); /* 鼠标悬停时向上移动 */
}

ul li a::before {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0px; /* 顶部位置为0px */
    left: 0px; /* 左侧位置为0px */
    width: 50px; /* 宽度50px */
    height: 100%; /* 高度100% */
    background-color: #fff; /* 背景颜色 */
    transform: skewX(45deg) translateX(150px); /* 斜切和平移 */
    transition: all 0.5s; /* 添加过渡效果 */
}

ul li a:hover::before {
    transform: skewX(45deg) translateX(-150px); /* 鼠标悬停时斜切和平移 */
}