schtonn
/
public


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>where's the button</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <script src='three.min.js'></script>
    <script src='TweenMax.min.js'></script>
    <script src="./script.js"></script>
    <style>
        body {
            overflow-x: hidden;
        }

        .toggle {
            display: inline-block;
        }

        .toggle {
            box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);
            border-radius: 8px;
            background: #ccd0d4;
            position: relative;
            height: 140px;
            width: 140px;
            scale: 0.5;
            margin: -30px;
        }

        .toggle:before {
            box-shadow: 0 0 17.5px 8.75px #fff;
            border-radius: 118.3px;
            background: #fff;
            position: absolute;
            margin-left: -50.4px;
            margin-top: -50.4px;
            opacity: 0.2;
            content: "";
            height: 100.8px;
            width: 100.8px;
            left: 50%;
            top: 50%;
        }

        .toggle .button {
            -webkit-filter: blur(1px);
            -moz-filter: blur(1px);
            filter: blur(1px);
            transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);
            border-radius: 96.32px;
            position: absolute;
            background: #ccd0d4;
            margin-left: -48.16px;
            margin-top: -48.16px;
            display: block;
            height: 96.32px;
            width: 96.32px;
            left: 50%;
            top: 50%;
        }

        .toggle .label {
            transition: 100ms cubic-bezier(0.23, 1, 0.32, 1);
            text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px #fff;
            line-height: 129px;
            text-align: center;
            position: absolute;
            font-family: "Lato", sans-serif;
            font-weight: 700;
            font-size: 42px;
            display: block;
            opacity: 0.9;
            height: 100%;
            width: 100%;
            color: rgba(0, 0, 0, 0.4);
        }

        .toggle input {
            opacity: 0;
            position: absolute;
            cursor: pointer;
            z-index: 1;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
        }

        .toggle input:active~.button {
            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);
        }

        .toggle input:active~.label {
            font-size: 40px;
            color: rgba(0, 0, 0, 0.45);
        }

        .toggle input:checked~.button {
            box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
        }

        .toggle input:checked~.label {
            font-size: 40px;
            color: rgba(0, 0, 0, 0.4);
        }
    </style>
</head>

<body>
    <div class="container">
        <button>I'm a Button</button>
    </div>
    <div class="container">
        <div class="toggle">
            <input type="checkbox">
            <span class="button"></span>
            <span class="label">1</span>
        </div>
        <div class="toggle">
            <input type="checkbox" checked>
            <span class="button"></span>
            <span class="label">2</span>
        </div>
        <div class="toggle">
            <input type="checkbox">
            <span class="button"></span>
            <span class="label">yes</span>
        </div>
        <div class="toggle">
            <input type="checkbox" checked>
            <span class="button"></span>
            <span class="label">no</span>
        </div>
    </div>
</body>