Divebi.com

Web Yazılım CSS

CSS Hareketli Onay Kutusu Yapımı – Animated Checkbox

Yayınlanan

İcerisinde

CSS Hareketli Onay Kutusu Yapımı

Bu yazımda, CSS kullanarak basit bir şekilde hareketli onay kutusu yaptık. CSS kodları kullanarak onay kutusunu dilediğiniz gibi özelleştirebilirsiniz.

Projemizi geçmeden önce bir HTML sayfası oluşturun veya Divebi Önizle (kod önizleme) web sayfasını kullanabilirsiniz. Aşağıda vermiş olduğum kodları kopyala yapıştır yaparak kodları test edebilirsiniz.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <input type="checkbox" onclick="myswitch()" id="switch">
        <label for="switch"></label>
        <!-- CSS Kodları-->
        <style>
            body {
                background-color: #fafafa;
                display: flex;
                justify-content: center;
            }
            input[type=checkbox] {
                opacity: 0;
                display: none;
            }
            label {
                height: 70px;
                width: 140px;
                background-color: #cccccc;
                margin-top: 250px;
                border: 1px solid #414141;
                display: inline-block;
                position: relative;
                border-radius: 100px;
                cursor: pointer;
                box-shadow: 0px 0px 6px #414141;
                transition: 0.5s;
            }
            label::after {
                content: '';
                height: 60px;
                width: 60px;
                background-color: #414141;
                position: absolute;
                top: 5px;
                left: 5px;
                border-radius: 50%;
                transition: 0.5s;
            }
            input:checked + label::after {
                left: calc(100% - 5px);
                transform: translateX(-100%);
                background-color: #cccccc;
            }
            input:checked + label {
                background-color: #0066ff;
            }
            .mode {
                background-color: black;
                transition: 0.5s;
            }
        </style>
        <!-- JavaScript Kodları -->
        <script>
            function myswitch(){
                var mod = document.body;
                mod.classList.toggle("mode");
            }
        </script>
    </body>
</html>
Yorum yapmak için tıklayın

Cevap bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Trend Olan Gönderiler