شهرام نویدی
1 سال پیش توسط شهرام نویدی مطرح شد
1 پاسخ

حالت آیکون های شب و روز در وبسایت

سلام امیدوارم حالتون خوب باشه میخواستم بدونم اینکه زمانیکه روی تم یک سایت کلیک میشه اون ایکون ماه و خورشید با یک افکت خاصی ظاهر میشن رو چجوری باید درستش کنم ؟؟؟


ثبت پرسش جدید
oss_vahid
تخصص : wp developer
@ossvahid 1 سال پیش مطرح شد
0

سلام

HTML

<div class="toggle">
    <input type="checkbox"/>
    <label></label>
</div> 

CSS

.toggle {
  position: relative;
  box-sizing: border-box;
}
.toggle input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.toggle label {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.toggle label:before {
  content: '';
  width: 70px;
  height: 40px;
  background: #fff;
  border: 2px solid #DDD;
  box-shadow: inset -30px 0 0 #666;
  position: relative;
  display: inline-block;
  border-radius: 20px;
  box-sizing: border-box;
  transition: 0.25s ease-in;
}

.toggle label:after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: inset -8px -5px #333;
  transition: 0.2s ease-in-out;
}

.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: inset 30px 0 0 #ffeb00;
}
.toggle input[type="checkbox"]:checked + label:after {
    box-shadow: inset 0 0 0 2px #FFF;
    background: #ffbc00;
    left: 39px;
    top: 8px;
    border: 2px dashed #FFF;
} 

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام