Toggle Switches fun using html css and javascript-JS Tutorial-php.cn

Toggle Switches fun using html css and javascript

Patricia Arquette

Release： 2024-12-05 14:20:13

Original

910 people have browsed it

Toggle Switches fun using html css and javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle Switches with Logic</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #121212;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        .toggle-container {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .toggle-label {
            margin-left: 10px;
            font-size: 1.2rem;
            background-color: rgb(64, 109, 94);
            padding: 5px;

        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #555;
            border-radius: 25px;
            transition: 0.4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 2.5px;
            background-color: white;
            border-radius: 50%;
            transition: 0.4s;
        }
        input:checked   .slider {
            background-color: #4caf50;
        }
        input:checked   .slider:before {
            transform: translateX(24px);
        }
        .box{
            height: 250px;
            width: 300px;
            background-color: rgb(8, 72, 51);
            border-radius: 10px;
            padding:5px;
        }
    </style>
</head>
<body>
    <div>

Copy after login

The above is the detailed content of Toggle Switches fun using html css and javascript. For more information, please follow other related articles on the PHP Chinese website!