一个漂亮的按钮

xiaoxiao涛

于 2019-08-01 16:57:10 发布

阅读量498

点赞数 2

分类专栏：前端文章标签：漂亮的按钮

本文链接：https://blog.csdn.net/qq_40571533/article/details/98075599

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

按下前：
在这里插入图片描述
按下后：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <label>
        <input type="checkbox" name="">
        <span class="btn"></span>
        <i class="fa fa-power-off"></i>
    </label>
</body>

</html>

body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0c0c0c;

}

label {
    position: relative;
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 50%;
}

label .btn {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #1b1b1b;
    border-radius: 50%;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 1),
                inset 0 -2px 5px rgba(0, 0, 0, 1),
                inset 0 2px 2px rgba(255, 255, 255, 0.5),
                0 0 0 2px #000000,
                0 0 0 5px #0c0c0c,
                0 0 0 5.5px #080808;
}

label input[type="checkbox"] {
    -webkit-appearance: none;
}

label .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: #0c0c0c;
}

label input[type="checkbox"]:checked ~ .btn {
    box-shadow: 0 0 0 rgba(0, 0, 0, 1),
                inset 0 -2px 5px rgba(0, 0, 0, 1),
                inset 0 1px 1px rgba(255, 255, 255, 0.1),
                0 0 0 2px #000000,
                0 0 0 5px #0c0c0c,
                0 0 0 5.5px #00a1ff;
}

label input[type="checkbox"]:checked ~ .fa {
    color: #00ffe7;
    text-shadow: 0 0 15px #00a1ff,
                 0 0 15px #00a1ff;
}

稍微解析一下：
用checkbox的选中和未选中来区分按下按钮前后两个状态，其他的就是设置一些阴影效果，就按钮单独来说挺好看的，但是与之搭配的网页感觉就比较少了。

xiaoxiao涛

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个漂亮的按钮

按下前：按下后：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
复制链接

扫一扫

专栏目录