ساخت دکمه سوئیچ با HTML

[Mahdi Askari]

دکمه های سوئیچ دکمه های دو وضعیتی هستن که با کلیک کردن روی وضعیتشون تغییر میکنن
کاردبردهای زیادی داره. میتونید برای باز یا بسته کردن یک قسمت ازش استفاده کنید یا هر حالت دو وضعیتی دیگر

یک نمونه برای شما آماده کردم که میتونید به رایگان از ایران انجمن دریافت کنید

نمونه:
http://iranrazmi.ir/theme/switch/

کد های سی اس اس:

.switch {
  position: relative;
  margin: 20px auto;
height: 26px;
width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
padding-top: 1px;
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 60px;

}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=65bd63"]#65bd63[/URL]
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=65bd63%29"]#65bd63)[/URL]
  background-image: -moz-linear-gradient(top, #9dd993, [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=65bd63%29"]#65bd63)[/URL]
  background-image: -o-linear-gradient(top, #9dd993, [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=65bd63%29"]#65bd63)[/URL]
  background-image: linear-gradient(to bottom, #9dd993, [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=65bd63%29"]#65bd63)[/URL]
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -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;
}

برای اجرای کد هم از این کد HTML استفاده کنید

 <div class="switch">
      <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
      <label for="week" class="switch-label switch-label-off">Week</label>
      <input type="radio" class="switch-input" name="view" value="month" id="month">
      <label for="month" class="switch-label switch-label-on">Month</label>
      <span class="switch-selection"></span>
    </div>

کپی مطلب فقط با نام ایران انجمن مجاز است