Bu yazımızda Css ile nasıl Toggle Switch yapabiliriz bunu öğreneceğiz. Toggle Switch, daha çok aç-kapa / yes-no / on-off gibi 2 seçenekli durumlarda görselliği biraz daha arttırmak amaçlı kullanılabilir.
Örneğimizde göreceğiniz gibi aslında Toggle Switch bir Checkbox görevi görüyor. Varolan checkbox’ımızın display değerini none yaparak onun arkaplanda işlevselliğinin devam etmesini sağlıyoruz. Görünür kısmı ise Css kodları ile oluşturuyoruz.
Örneklerimizi incelediğinizde daha iyi anlaşılacaktır. Css kodlarında değişiklikler yaparak kendi tasarımlarınıza uygun hale getirebilirsiniz.
Css ile Toggle Switch Yapımı
Toggle Switch Html Kodları
|
1 2 3 4 5 6 |
<label class="toggle-switch"> <input type="checkbox" checked> <span class="switch-box"></span> </label> |
Toggle Switch Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
.toggle-switch { position: relative; display: inline-block; width: 45px; height: 24px; } .toggle-switch input { display: none; } .switch-box { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #bbb; -moz-transition: .4s; -o-transition: .4s; -webkit-transition: .4s; transition: .4s; } .switch-box:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -moz-transition: .4s; -o-transition: .4s; -webkit-transition: .4s; transition: .4s; } input:checked + .switch-box { background-color: #E7512F; } input:checked + .switch-box:before { -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } |
Toggle Switch Örneği
Toggle Switch Html Kodları
|
1 2 3 4 5 6 |
<label class="toggle-switch"> <input type="checkbox" checked> <span class="switch-box circle"></span> </label> |
Toggle Switch Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
.toggle-switch { position: relative; display: inline-block; width: 45px; height: 24px; } .toggle-switch input { display: none; } .switch-box { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #bbb; -moz-transition: .4s; -o-transition: .4s; -webkit-transition: .4s; transition: .4s; } .switch-box:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -moz-transition: .4s; -o-transition: .4s; -webkit-transition: .4s; transition: .4s; } input:checked + .switch-box { background-color: #E7512F; } input:checked + .switch-box:before { -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); -webkit-transform: translateX(20px); transform: translateX(20px); } .switch-box.circle { -moz-border-radius: 34px; -webkit-border-radius: 34px; border-radius: 34px; } .switch-box.circle:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } |
Toggle Switch Örneği
Toggle Switch Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> |
Toggle Switch Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.onoffswitch { position: relative; width: 75px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #FFFFFF; border-radius: 20px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 28px; padding: 0; line-height: 28px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 12px; background-color: #51C234; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 12px; background-color: #DDDDDD; color: #FFFFFF; text-align: right; } .onoffswitch-switch { display: block; width: 16px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 43px; border: 2px solid #FFFFFF; border-radius: 20px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } |
Toggle Switch Örneği
Toggle Switch Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<div class="onoffswitch"> <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> <label class="onoffswitch-label" for="myonoffswitch"> <span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> </label> </div> |
Toggle Switch Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.onoffswitch { position: relative; width: 70px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #FFFFFF; border-radius: 0px; } .onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; } .onoffswitch-inner:before { content: "ON"; padding-left: 6px; background-color: #34A7C1; color: #FFFFFF; } .onoffswitch-inner:after { content: "OFF"; padding-right: 6px; background-color: #ddd; color: #999999; text-align: right; } .onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 36px; border: 2px solid #FFFFFF; border-radius: 0px; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } |
Toggle Switch Örneği
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Css ile Özel Radio Button (Custom Radio Button) Yapımı
Css ile Özel Checkbox (Custom Checkbox) Yapımı
Yeni bir yazımda görüşmek üzere.
