CSSだけで作るきれいでユニークなアニメーションエフェクトのトグルボタンです。上側のボタンは、クリクすると背景部分が円のほうへ収縮後、円を伴って右へ伸びます。下側のボタンは背景が180度回転し、円の位置が右になります。それぞれもう一度クリックすると元に戻ります。なお、ボタンサイズはオリジナルの50%にしています。

サンプルのhtmlソース

<div class="wrap">
	<input type="checkbox" />
	<div class="outer"></div>
	<div class="inner"></div>
</div>
<div class="wrap">
	<input type="checkbox" />
	<div class="outer"></div>
	<div class="inner"></div>
</div>

サンプルのCSSソース

body .wrap {
  width: 125px;
  height: 50px;
	position: absolute;
  left: calc(50% - 125px);
  top: 150px
}
body .wrap:first-of-type {
  margin-top: -50px;
}
body .wrap:first-of-type .inner {
  transition: 0.4s ease-in-out;
  transition-delay: 0s;
}
body .wrap:first-of-type .outer {
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
  transition-delay: 0.4s;
}
body .wrap:first-of-type .outer:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 40px;
  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc);
}
body .wrap:first-of-type input:checked ~ .outer {
  -webkit-animation: shift 0.8s ease-in-out 1 forwards;
          animation: shift 0.8s ease-in-out 1 forwards;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body .wrap:first-of-type input:checked ~ .outer:before {
  background: linear-gradient(to left, #03001e, #7303c0, #ec38bc);
}
@-webkit-keyframes shift {
  0% {
    width: 125px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    width: 50px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    width: 50px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    width: 125px;
    -webkit-transform: translateX(150px) rotate(180deg);
            transform: translateX(150px) rotate(180deg);
  }
}
@keyframes shift {
  0% {
    width: 125px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    width: 50px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    width: 50px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    width: 125px;
    -webkit-transform: translateX(75px) rotate(180deg);
            transform: translateX(75px) rotate(180deg);
  }
}
body .wrap:first-of-type input:checked ~ .outer ~ .inner {
  transition-delay: 0.4s;
  -webkit-transform: translateX(75px);
          transform: translateX(75px);
  box-shadow: inset 3px -5px 8px 0 rgba(0, 0, 0, 0.5);
}
body .wrap:nth-of-type(2) {
  margin-top: 37px;
}
body .wrap:nth-of-type(2) input:checked {
  z-index: 7;
}
body .wrap:nth-of-type(2) input:checked ~ .outer {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  margin-left: 75px;
}
body .wrap:nth-of-type(2) input:checked ~ .inner {
  margin-left: 75px;
  box-shadow: inset 3px -5px 8px 0 rgba(0, 0, 0, 0.5);
}
body .outer, body input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  border-radius: 40px;
  opacity: 0;
}
body .outer:nth-of-type(2), body input:nth-of-type(2) {
  z-index: 8;
}
body .outer {
  background: linear-gradient(to right, #03001e, #7303c0, #ec38bc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 20px 0 rgba(0, 0, 0, 0.15);
  opacity: 1;
  z-index: 0;
  -webkit-transform-origin: 25px 25px;
          transform-origin: 25px 25px;
  transition: margin 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition-delay: 0s, 0.3s;
}
body .inner {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  box-shadow: inset -3px -5px 8px 0 rgba(0, 0, 0, 0.5);
  background-position: -18px -15px;
  background-size: 120%;
  position: absolute;
  left: calc(50% - 58px);
  top: calc(50% - 20px);
  border-radius: 500%;
  transition: margin 0.3s ease-in-out, box-shadow 0.6s ease-in-out;
  transition-delay: 0.3s, 0s;
}