利用CSS设计ON/OFF按钮

最新推荐文章于 2024-06-24 10:48:58 发布

Shauna_Wu

最新推荐文章于 2024-06-24 10:48:58 发布

阅读量1.3k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Shauna_Wu/article/details/80238522

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如图：
这里写图片描述

这里写图片描述

点击可以进行切换

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="toggle">
        <input type="checkbox" checked id="t">
        <label for="t"></label>
    </div>
    <style type="text/css">
        .toggle{
            width: 80px;
            height: 26px;
            background: #333;
            margin: 20px auto;
            position: relative;
            border-radius: 50px;
            box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
        }
        .toggle:after{
            content: 'OFF';
            color: #fff;
            position: absolute;
            right: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
            text-shadow: 1px 1px 0px rgba(255,255.255..15);
        }
        .toggle:before{
            content: 'ON';
            color: #f66;
            position: absolute;
            left: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
        }
        .toggle label{
            display: block;
            width: 34px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            top: 3px;
            left: 3px;
            z-index: 1;
            background: #fcfff4;
            background: linear-gradient(top,#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            border-radius: 50px;
            transition: all 0.4s ease;
            box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
        }
        .toggle input[type=checkbox]{
            visibility: hidden;
        }
        .toggle input:checked + label{
            left: 43px;
        }
    </style>
</body>
</html>