Altın Konu Css'de Kayan Buton Nasıl Yapılır?

KERİM ERBAY · 23 Kas 2023

Css'de Kayan Buton Nasıl Yapılır?

Anahtar düğmesi, bazı işlevlerin açık ve kapalı durumunu temsil etmek için kullanılabilir . Bazen radyo düğmeleri veya onay kutuları yerine geçiş düğmesi kullanılabilir. Bu derste CSS kullanarak geçiş anahtarı oluşturmayı öğreneceğiz.

Geçiş Anahtarı düğmesi için sadece temel bir yapı oluşturacağız. Aşağıdaki gibi bir HTML belgesi oluşturmak için buraya bir onay kutusu ve bir etiket koymamız gerekiyor. Bunu HTML etiket etiketini ve HTML giriş türü = onay kutusunu kullanarak yapabiliriz .

Kayar Düğme İçin HTML Kodu

HTML:

<div class="custom-checkbox">
  <input id="status"
         type="checkbox"
         name="status">
  <label for="status">
    <div class="status-switch"
         data-unchecked="Off"
         data-checked="On">
    </div>
  </label>
</div>

Umarız işaretleme kendi adına konuşur, ancak yukarıda neler olup bittiğinden emin değilseniz işte bazı noktalar:

divGeçiş Anahtarımızın genel yüksekliğini ve genişliğini ayarlamak için kullanacağımız her şeyi bir araya getiriyoruz
input CSS stillerimizle gizleyeceğimiz bir onay kutusu var , ana içerik label öğenin içinde olacak (kendisinin de div içinde bir tane daha var)
Öğenin özelliği inputiçinde 'id'nin belirtilmesi, kullanıcının öğeyi tıklatarak onay kutusu öğesini işaretlemesine/işaretini kaldırmasına olanak tanırforlabelinputlabel
İçinde slayt geçişimizin iki durumu için metni oluşturacak iki veri özelliği ( ve ) div bulunur labeldata-uncheckeddata-checked

Başlangıçta, kayan Geçiş Anahtarı için her biri açık veya kapalı durumunu temsil eden iki radyo düğmesi girişi kullanmayı denedim.

Ancak, stil bir kabusa dönüşmeden önce bu yaklaşımla ancak bu kadar ileri gidebildim, bu yüzden radyoları tek bir onay kutusuyla değiştirmeye karar verdim, bu da her şeyi çok daha kolay hale getirdi.

Kayar Geçiş Anahtarının yalnızca iki durumu olabilir; 'işaretli' veya 'işaretsiz', bir onay kutusu kullanmak daha mantıklıdır.

HTML Kod Çıkışı

Kayar Buton İçin Css Kodu

CSS:

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica, Arial, sans-serif;
}

.custom-checkbox {
  width: 340px;
  height: 80px;
}
.custom-checkbox input#status {
  display: none;
}
.custom-checkbox input#status + label {
  height: 100%;
  width: 100%;
}
.custom-checkbox input#status + label > .status-switch {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: grey;
  color: white;
  transition: all 0.5s ease;
  padding: 3px;
  border-radius: 3px;
}
.custom-checkbox input#status + label > .status-switch:before, .custom-checkbox input#status + label > .status-switch:after {
  border-radius: 2px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  display: flex;
  align-items: center;
  position: absolute;
  justify-content: center;
  transition: all 0.3s ease;
}
.custom-checkbox input#status + label > .status-switch:before {
  background-color: white;
  color: black;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
  left: 3px;
  z-index: 10;
  content: attr(data-unchecked);
}
.custom-checkbox input#status + label > .status-switch:after {
  right: 0;
  content: attr(data-checked);
}
.custom-checkbox input#status:checked + label > .status-switch {
  background-color: #40c253;
}
.custom-checkbox input#status:checked + label > .status-switch:after {
  left: 0;
  content: attr(data-unchecked);
}
.custom-checkbox input#status:checked + label > .status-switch:before {
  color: #40c253;
  left: 50%;
  content: attr(data-checked);
}

Geçiş Anahtarının stili düz CSS'de yapılabilir, ancak SCSS'nin kullanılması öğeler hiyerarşisiyle çalışmayı kolaylaştırır.

CSS kodu çekici bir HTML bileşeni oluşturmak için kullanılır. Bu CSS özelliği, geçiş anahtarında stil oluşturmak için kullanılır.

Varsayılan onay kutusunu gizleyip ona bir kaydırıcı ekleyeceğiz.

position Kaydırıcıyı anahtara göre konumlandırmak için bu özelliği kullanın .
Geçiş Anahtarına height ve işaretini ekleyin .width
background-color Açık-kapalı durumunu görüntülemek için kaydırıcıya farklı bir tane ekleyin .
transformGeçiş Anahtarına slayt efekti eklemek için özelliği kullanın

Geçiş Anahtarını buna göre özelleştirmek için diğer CSS özelliklerini kullanabiliriz. Düğmelerimize özelleştirme eklemek için düğme özelliğini kullanırız, bu da vurgulu efekti gibi çeşitli tasarımlar eklememize olanak tanır. Düğme özelliğini özelleştirme eklemek için kullanırız. vurgulu efekt gibi çeşitli tasarımlar eklememize olanak tanıyan düğmeler.

Css Kayar Düğmenin Son Çıktısı

sürgülü düğme css

Geçiş Anahtarının kullanımı nedir?

Geçiş anahtarlarının en büyük kullanımı, bir sistemin tercihlerini ve işlevsel durumlarını değiştirmektir. Kullanıcıların iki karşıt durum arasında seçim yapmasına olanak sağlamak için iki onay kutusu veya iki radyo düğmesi yerine geçiş anahtarları kullanılabilir.