Giriş Yap / Kayıt Ol
thodex

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!

2Beğeni
  • 1 Yazan TEHET
  • 1 Yazan muhammetdkaya

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > HTML - CSS - XML

ios buton

  #1  
Okunmamış 31 Mayıs 2020, 17:59
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 11 Nisan 2015
Yaş / Cinsiyet: 27 / Erkek
Meslek: Öğrenci
Ad, Soyad: Mu... Du...
Mesajlar: 638
Beğeniler: 136 / 145
Ticaret: 4, 100%
arkadaşlar elimdeki örnek kodu ios buton tarzına dönüştürmek istiyorum ancak beceremedim yardımcı olur musunuz ?

Kod:
<label for="question_poll-156"><span class="wpqa_checkbox"><input type="checkbox" id="question_poll-156" class="question_poll" value="on" name="question_poll"></span><span class="wpqa_checkbox_span">buton</span></label>
örnek: https://codepen.io/TazTheManiac/pen/rGrpMg
  #2  
Okunmamış 31 Mayıs 2020, 18:20
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 11 Nisan 2015
Yaş / Cinsiyet: 27 / Erkek
Meslek: Öğrenci
Ad, Soyad: Mu... Du...
Mesajlar: 638
Beğeniler: 136 / 145
Ticaret: 4, 100%
TEHET
  #3  
Okunmamış 31 Mayıs 2020, 19:01
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 23 Kasım 2015
Yaş / Cinsiyet: 26 / Erkek
Konum: Bursa
Ad, Soyad: Ne... Ko...
Mesajlar: 286
Beğeniler: 74 / 6
Ticaret: 0, 0%
Linkteki kodları kullanarak yapabilirsiniz, tam olarak neyi beceremediniz?

HTML:
Kod:
<h1>iOS Styled Toggle Switch</h1>
<label class="form-switch">
  <input type="checkbox">
  <i></i>
  label text
</label>
CSS:
Kod:
.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);
}
  #4  
Okunmamış 31 Mayıs 2020, 19:02
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 11 Nisan 2015
Yaş / Cinsiyet: 27 / Erkek
Meslek: Öğrenci
Ad, Soyad: Mu... Du...
Mesajlar: 638
Beğeniler: 136 / 145
Ticaret: 4, 100%
Mango hocam benim html koduma uyarlamam gerekiyor.
  #5  
Okunmamış 31 Mayıs 2020, 19:04
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 23 Kasım 2015
Yaş / Cinsiyet: 26 / Erkek
Konum: Bursa
Ad, Soyad: Ne... Ko...
Mesajlar: 286
Beğeniler: 74 / 6
Ticaret: 0, 0%
Class'ı form-switch olan bir label oluşturun ve içerisine checkbox input ile <i> etiketi yerleştirin. Sonra css kodlarını aynen kopyalayıp kendi css dosyanıza yapıştırın. Bu kadar.
  #6  
Okunmamış 31 Mayıs 2020, 19:05
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 11 Nisan 2015
Yaş / Cinsiyet: 27 / Erkek
Meslek: Öğrenci
Ad, Soyad: Mu... Du...
Mesajlar: 638
Beğeniler: 136 / 145
Ticaret: 4, 100%
Mango hocam onu yapamıyorum işte tema her güncellemede gider.
  #7  
Okunmamış 01 Haziran 2020, 13:19
TEHET Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 04 Ekim 2014
Yaş / Cinsiyet: 28 / Erkek
Meslek: Tasarımcı
Konum: Ankara
Ad, Soyad: Mu... Ak...
Mesajlar: 791
Beğeniler: 373 / 96
Ticaret: 1, 100%


https://codepen.io/tehet/pen/qBbWNPg
muhammetdkaya bunu beğendi.
  #8  
Okunmamış 01 Haziran 2020, 13:38
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 11 Nisan 2015
Yaş / Cinsiyet: 27 / Erkek
Meslek: Öğrenci
Ad, Soyad: Mu... Du...
Mesajlar: 638
Beğeniler: 136 / 145
Ticaret: 4, 100%
TEHET hocam çok teşekkür ederim iyiki etiketlemişim sizi
TEHET bunu beğendi.
Cevap Yaz Favorilerime Ekle

igresellers


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > HTML - CSS - XML


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 20:21.