Kayıt Ol

Reklam gösterimini engelleyici yazılım kullandığınızı görüyoruz.
Sitemizin ayakta kalıp sizlere hizmet edebilmek için en büyük gelir kaynağı sayfamızda gösterilen reklamlardır.
Reklam gösterimde bizim sayfamıza ayrıcalık tanıyarak ayakta kalmamıza destek olmak ister misiniz ?

Buton Tasarımı #1

` ripeNess
Kod Parçacıkları
0
380

Konu

#1
Avatar: ` ripeNess
` ripeNess
Aktif Üye
WWW Bul
Yorumları: 3,127
Konuları: 334
Kayıt Tarihi: 04-12-2016
Rep Puanı: -222
Buton Yapımcısı: -
Buton Sürümü: -

Buton Görünümü: 

[Resim: b81a2c87-buton.png]

Buton Demo: TIKLA DEMO GİT


Ana Sayfa Kodu:

PHP Kod:
<h2><strong>Forum.</strong><a href=
    "https://forum.webdiyo.com/">WebDiyo.COM</a></h2>
<link rel="stylesheet" href="stil/style.css">

<title> WebDiyo Buton Tasarim</title>
<div class="container">
  <div class="switch">
    <div class="switch-back"></div>

    <input type="radio" class="switch-input" name="switch" value="off" id="off" checked>
    <label for="off" class="switch-label-left switch-label-off"><span>Off</span></label>
    <div class="label-off"><div>Off</div></div>
    
    <input type="radio" class="switch-input" name="switch" value="on" id="on">
    <label for="on" class="switch-label-right switch-label-on"><span>On</span></label>
    <div class="label-on"><div>On</div></div>

    <span class="switch-selection"></span>
  </div>
</div> 
FTP stil/style.css adında klasör oluşturun ve dosyanın içine aşağıdaki kodları yazın.

PHP Kod:
body { background: #D3D8DE; text-align: center; }
h2 { color: rgba(0,0,0,0.2); }
a { text-decoration: none; color: #EC5C93; }

.container {
  position: relative;
  margin: 20px auto;
  width: 48px;
  text-align: center;
}

.switch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 44px;
  width: 48px;
  border: 3px solid #FFF;
  border-radius: 10px;
  z-index: 2;
}

.switch:before, .switch:after { 
  content: " ";
  position: absolute;
  top: 2px;
  margin: 0;
  height: 33px;
  width: 33px;
  background: #69727F;
  border: 3px solid #FFF;
  border-radius: 6px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -o-transform:      rotate(45deg);
  -ms-transform:     rotate(45deg);
  transform:         rotate(45deg);
  z-index: 1;
}

.switch:before { 
  left: -18px;
}

.switch:after { 
  right: -18px;
}

.switch-back {
  position: absolute;
  top: -4px;
  left: -1px;
  margin: 0 auto;
  height: 45px;
  width: 50px;
  background: #69727F;
  border-top: 3px solid #FFF;
  border-bottom: 3px solid #FFF;
  border-radius: 6px;
  z-index: 2;
}

.switch-input {
  .display: none;
}

.switch-label-left, .switch-label-right {
  display: block;
  position: absolute;
  top: 0;
  left: -19px;
  width: 72%;
  height: 100%;
  color: transparent;
  text-indent: -999px;
  overflow: hidden;
  cursor: pointer;
  .background: rgba(255,0,0,0.1);
  z-index: 3;
}

.switch-label-right {
  left: auto;
  right: -19px;
  width: 72%;
}

.switch-input:checked + .switch-label {
  -webkit-transition: 0.2s ease-out;
  -moz-transition:    0.2s ease-out;
  -o-transition:      0.2s ease-out;
  transition:         0.2s ease-out;
}

.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 27px;
  -webkit-box-shadow: 0px 0px 25px rgba(150,255,50,0.3), 1px 1px 10px rgba(0,0,0,0.8), inset 0px 0px 0px 3px #B0CD61;
  box-shadow: 0px 0px 25px rgba(150,255,50,0.3), 1px 1px 10px rgba(0,0,0,0.8), inset 0px 0px 0px 3px #B0CD61;
}

.switch-input:checked + .switch-label-off ~ .switch-selection {
  -webkit-box-shadow: 0px 0px 25px rgba(255,0,0,0.2), 1px 1px 10px rgba(0,0,0,0.8), inset 0px 0px 0px 3px #E4837B;
  box-shadow: 0px 0px 25px rgba(255,0,0,0.2), 1px 1px 10px rgba(0,0,0,0.8), inset 0px 0px 0px 3px #E4837B;
}

.switch-selection {
  display: block;
  position: absolute;
  top: 3px;
  left: -15px;
  margin: 4px;
  width: 25px;
  height: 25px;
  background: #FFF;
  border: 2px solid #FFF;
  border-radius: 3px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -o-transform:      rotate(45deg);
  -ms-transform:     rotate(45deg);
  transform:         rotate(45deg);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
  z-index: 999;
}

.label-on, .label-off {
  display: block;
  position: absolute;
  top: 3px;
  margin: 4px;
  width: 25px;
  height: 25px;
  background: rgba(0,0,0,0.1);
  border: 2px solid transparent;
  border-radius: 3px;
  color: #69727F;
  font-size: 0.75em;
  text-align: center;
  line-height: 25px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -o-transform:      rotate(45deg);
  -ms-transform:     rotate(45deg);
  transform:         rotate(45deg);
  z-index: 2;
}

.label-on { right: -15px; }
.label-off { left: -15px; }

.label-on div, .label-off div {
  -webkit-transform: rotate(-45deg) !important;
  -moz-transform:    rotate(-45deg);
  -o-transform:      rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  transform:         rotate(-45deg) !important;
  z-index: -1;
} 

Cevapla


Bir hesap oluşturun veya yorum yapmak için giriş yapın

Yorum yapmak için üye olmanız gerekiyor

ya da

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
CSS Örnekleri #4 Buton Yapımı ` ripeNess 1 341 28-10-2018, Saat: 15:52
Son Yorum: ` bRae
CSS Örnekleri #5 Beğeni Buton Yapımı ` ripeNess 1 341 28-10-2018, Saat: 15:52
Son Yorum: ` bRae

Task