ios buton

31.05.2020 17:59

muhammetdkaya WM Aracı Kullanıcı

Üyelik 11.04.2015
Yaş/Cinsiyet 30 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad M** D**
Mesajlar 638
Beğeniler 146 / 136
Ticaret 4, (%100)

arkadaşlar elimdeki örnek kodu ios buton tarzına dönüştürmek istiyorum ancak beceremedim yardımcı olur musunuz ?

buton

örnek: https://codepen.io/TazTheManiac/pen/rGrpMg

31.05.2020 18:20

#2

muhammetdkaya WM Aracı Kullanıcı

Üyelik 11.04.2015
Yaş/Cinsiyet 30 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad M** D**
Mesajlar 638
Beğeniler 146 / 136
Ticaret 4, (%100)

TEHET

31.05.2020 19:01

#3

Mango WM Aracı Kullanıcı

Üyelik 23.11.2015
Yaş/Cinsiyet 29 / E
Meslek Front-End Developer
Konum Bursa

Ad Soyad N** K**
Mesajlar 311
Beğeniler 8 / 81
Ticaret 0, (%0)

Linkteki kodları kullanarak yapabilirsiniz, tam olarak neyi beceremediniz?

HTML:

iOS Styled Toggle Switch


  
  
  label text

CSS:


.form-switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}
.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}
.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after {
  transform: translate3d(16px, 2px, 0);
}
.form-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-switch input:checked + i {
  background-color: #4BD763;
}
.form-switch input:checked + i::before {
  transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}
.form-switch input:checked + i::after {
  transform: translate3d(22px, 2px, 0);
}

31.05.2020 19:02

#4

muhammetdkaya WM Aracı Kullanıcı

Üyelik 11.04.2015
Yaş/Cinsiyet 30 / E
Meslek Öğrenci
Konum İstanbul Avrupa

Ad Soyad M** D**
Mesajlar 638
Beğeniler 146 / 136
Ticaret 4, (%100)

Mango hocam benim html koduma uyarlamam gerekiyor.

31.05.2020 19:04

#5

Mango WM Aracı Kullanıcı

Üyelik 23.11.2015
Yaş/Cinsiyet 29 / E
Meslek Front-End Developer
Konum Bursa

Ad Soyad N** K**
Mesajlar 311
Beğeniler 8 / 81
Ticaret 0, (%0)

Class'ı form-switch olan bir label oluşturun ve içerisine checkbox input ile etiketi yerleştirin. Sonra css kodlarını aynen kopyalayıp kendi css dosyanıza yapıştırın. Bu kadar.

Paylaş

ios buton

iOS Styled Toggle Switch

Üye Girişi Yap