How to Design an IOS Style Switch Button Based on CSS3

How to Design an IOS Style Switch Button Based on CSS3: BY Larry13 Nov,2020; Tags:
CSS3 Button

Introduction

This time we bring another iOS style switch button based on CSS3. Its style is iOS style. One of the features is that you cannot select these 3 items at the same time.

Instructions

Css Code

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  background: linear-gradient(28deg, #c5eff7, #fff);
}
form {
  display: grid;
  background: #fafafa;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem 0;
  min-width: 160px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 2rem 1rem;
  -webkit-filter: drop-shadow(20px 20px 20px #aaa);
          filter: drop-shadow(20px 20px 20px #aaa);
  position: relative;
}
h1 {
  grid-column: 1/-1;
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
  background: #89c4f4;
  position: absolute;
  width: 248px;
  padding: 1rem;
  z-index: 3;
  top: 0;
  left: -1rem;
  text-align: center;
  -webkit-transform-origin: top left;
          transform-origin: top left;
  -webkit-transform: rotate(-90deg) translate(-100%, -100%);
          transform: rotate(-90deg) translate(-100%, -100%);
}
label {
  cursor: pointer;
}

Js Code

'use strict';

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.React = factory());
}(this, (function () { 'use strict';

var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;

function toObject(val) {
	if (val === null || val === undefined) {
		throw new TypeError('Object.assign cannot be called with null or undefined');
	}

	return Object(val);
}

function shouldUseNative() {
	try {
		if (!Object.assign) {
			return false;
		}

		var test1 = new String('abc');  
		test1[5] = 'de';
		if (Object.getOwnPropertyNames(test1)[0] === '5') {
			return false;
		}

		var test2 = {};
		for (var i = 0; i < 10; i++) {
			test2['_' + String.fromCharCode(i)] = i;
		}
		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
			return test2[n];
		});
		if (order2.join('') !== '0123456789') {
			return false;
		}

		var test3 = {};
		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
			test3[letter] = letter;
		});
		if (Object.keys(Object.assign({}, test3)).join('') !==
				'abcdefghijklmnopqrst') {
			return false;
		}

		return true;
	} catch (err) {
		return false;
	}
}

VIEW NOW