Pure CSS toggle buttons

index.pug

h2 Toggle 'em
ul.tg-list
  li.tg-list-item
    h4 Light
    input#cb1.tgl.tgl-light(type = "checkbox")
    label.tgl-btn(for = "cb1")
  li.tg-list-item
    h4 iOS
    input#cb2.tgl.tgl-ios(type = "checkbox")
    label.tgl-btn(for = "cb2")
  li.tg-list-item
    h4 Skewed
    input#cb3.tgl.tgl-skewed(type = "checkbox")
    label.tgl-btn(data-tg-off = "OFF", data-tg-on = "ON", for = "cb3")
  li.tg-list-item
    h4 Flat
    input#cb4.tgl.tgl-flat(type = "checkbox")
    label.tgl-btn(for = "cb4")
  li.tg-list-item
    h4 Flip
    input#cb5.tgl.tgl-flip(type = "checkbox")
    label.tgl-btn(data-tg-off = "Nope", data-tg-on = "Yeah!", for = "cb5")

pure-css-toggle-buttons.markdown

Pure CSS toggle buttons

A Pen by Anisur Rahman on CodePen.

License.

script.js

/** Toggle buttons
 * @mallendeo
 */

style.scss

html,
body {
	display: flex;
	min-height: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-family: sans-serif;
}

ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tg-list {
	text-align: center;
	display: flex;
	align-items: center;
}

.tg-list-item {
	margin: 0 2em;
}

h2 {
	color: #777;
}

h4 {
	color: #999;
}

.tgl {
	display: none;
  
	// add default box-sizing for this scope
	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,
	& + .tgl-btn {
		box-sizing: border-box;
		&::selection {
			background: none;
		}
	}
  
	+ .tgl-btn {
		outline: 0;
		display: block;
		width: 4em;
		height: 2em;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
    
		&:after {
			left: 0;
		}
    
		&:before {
			display: none;
		}
	}
  
	&:checked + .tgl-btn:after {
		left: 50%;
	}
}

// themes
.tgl-light {
	+ .tgl-btn {
		background: #f0f0f0;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		&:after {
			border-radius: 50%;
			background: #fff;
			transition: all .2s ease;
		}
	}
  
	&:checked + .tgl-btn {
		background: #9FD6AE;
	}
}

.tgl-ios {
	+ .tgl-btn {
		background: #fbfbfb;
		border-radius: 2em;
		padding: 2px;
		transition: all .4s ease;
		border: 1px solid #e8eae9;
		&:after {
			border-radius: 2em;
			background: #fbfbfb;
			transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
			box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
		}
    
    &:hover:after {
      will-change: padding;
    }
    
		&:active {
			box-shadow: inset 0 0 0 2em #e8eae9;
			&:after {
				padding-right: .8em;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: #86d993;
    &:active {
      box-shadow: none;
      &:after {
        margin-left: -.8em;
      }
    }
	}
}

.tgl-skewed {
	+ .tgl-btn {
		overflow: hidden;
		transform: skew(-10deg);
		backface-visibility: hidden;
		transition: all .2s ease;
		font-family: sans-serif;
		background: #888;
		&:after,
    &:before {
			transform: skew(10deg);
			display: inline-block;
			transition: all .2s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.4);
		}
    
		&:after {
			left: 100%;
			content: attr(data-tg-on);
		}
    
		&:before {
			left: 0;
			content: attr(data-tg-off);
		}
    
		&:active {
			background: #888;
			&:before {
				left: -10%;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: #86d993;
    &:before {
      left: -100%;
    }

    &:after {
      left: 0;
    }

    &:active:after {
      left: 10%;
    }
	}
}

.tgl-flat {
	+ .tgl-btn {
		padding: 2px;
		transition: all .2s ease;
		background: #fff;
		border: 4px solid #f2f2f2;
		border-radius: 2em;
		&:after {
			transition: all .2s ease;
			background: #f2f2f2;
			content: "";
			border-radius: 1em;
		}
	}
  
	&:checked + .tgl-btn {
    border: 4px solid #7FC6A6;
    &:after {
      left: 50%;
      background: #7FC6A6;
    }
  }
}

.tgl-flip {
	+ .tgl-btn {
		padding: 2px;
		transition: all .2s ease;
		font-family: sans-serif;
		perspective: 100px;
		&:after,
    &:before {
			display: inline-block;
			transition: all .4s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			backface-visibility: hidden;
			border-radius: 4px;
		}
    
		&:after {
			content: attr(data-tg-on);
			background: #02C66F;
			transform: rotateY(-180deg);
		}
    
		&:before {
			background: #FF3A19;
			content: attr(data-tg-off);
		}

		&:active:before {
      transform: rotateY(-20deg);
		}
	}
  
	&:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }
    
    &:after {
      transform: rotateY(0);
      left: 0;
      background: #7FC6A6;
    }
    
    &:active:after {
      transform: rotateY(20deg);
    }
	}
}