استایل زیبا برای دکمه های دو حالتی - CSS3 Toggle Buttons ( نمونه 6)

@import url(http://fonts.googleapis.com/css?family=Francois+One);

@import url(http://fonts.googleapis.com/css?family=PT+Sans);

@font-face {

  font-family: 'Audiowide';

  font-style: normal;

  font-weight: 400;

  src: local("Audiowide"), local("Audiowide-Regular"), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff");

}

body {

  font-size: 62.5%;

  background-color: #fff;

  margin: 10px;

  border: 1px solid #333;

}

*,

*::before,

*::after {

  box-sizing: border-box;

}

h1, h2, h3 {

  font-family: 'PT Sans', sans-serif;

  text-transform: uppercase;

}

h1 {

  font-size: 2.4em;

  background-color: #292929;

  text-align: center;

  padding: 20px;

  margin: 0;

  color: #fff;

}

h1 a {

  display: block;

  margin-top: 10px;

  text-transform: none;

  color: #aaa;

  font-size: 16px;

  text-decoration: none;

}

.headingOuter {

  background: #f1f1f1;

  text-align: center;

  margin-top: 50px;

  margin-bottom: 0;

  padding: 10px;

  border-top: 1px solid #333;

  border-bottom: 1px solid #333;

  font-size: 1.6em;

}

.headingOuter:first-child {

  margin-top: 0;

}

h1 + .headingOuter {

  margin-top: 0;

}

/* =====================================================

   Some defaults across all toggle demos

   ===================================================== */

.toggle {

  display: block;

  text-align: center;

  margin-top: 40px;

  user-select: none;

}

.toggle--checkbox {

  display: none;

}

.toggle--btn {

  display: block;

  margin: 0 auto;

  font-size: 1.4em;

  transition: all 350ms ease-in;

}

.toggle--btn:hover {

  cursor: pointer;

}

.toggle--btn, .toggle--btn:before, .toggle--btn:after,

.toggle--checkbox,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature,

.toggle--feature:before,

.toggle--feature:after {

  transition: all 250ms ease-in;

}

.toggle--btn:before, .toggle--btn:after,

.toggle--checkbox:before,

.toggle--checkbox:after,

.toggle--feature:before,

.toggle--feature:after {

  content: '';

  display: block;

}

/* =====================================================

   Toggle - switch stylee

   ===================================================== */

.toggle--switch .toggle--btn {

  position: relative;

  width: 120px;

  height: 44px;

  font-family: 'PT Sans', Sans Serif;

  text-transform: uppercase;

  color: #fff;

  background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);

  background-position: -80px 0;

  background-size: 200% 100%;

  box-shadow: inset 0 0px 22px -8px #111;

}

.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {

  border-radius: 4px;

}

.toggle--switch .toggle--btn:before {

  display: block;

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 52px;

  height: 44px;

  border: 2px solid #202027;

  background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);

  background-color: #2b2e3a;

  background-size: 5px 5px;

  text-indent: -100%;

}

.toggle--switch .toggle--feature {

  position: relative;

  display: block;

  overflow: hidden;

  height: 44px;

  text-shadow: 0 1px 2px #666;

}

.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

.toggle--switch .toggle--feature:before {

  content: attr(data-label-on);

  left: -60%;

}

.toggle--switch .toggle--feature:after {

  content: attr(data-label-off);

  right: 16%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn {

  background-position: 0 0;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {

  left: calc(100% - 52px);

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {

  left: 20%;

}

.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {

  right: -60%;

}