Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <style type="text/css">

    .switch {
      width: auto;
			display: inline-block;
			position: relative;
			user-select: none;
			cursor: pointer;
    }

    .switch__label {
      width: 50%;
			display: inline-block;
			font-size: 12px;
			padding: 5px 10px;
			box-sizing: border-box;
    }

    .switch__labels {
			border-radius: 20px;
			overflow: hidden;
			background: #ccc;
			font-size: 0;
    }

		.switch__control {
			position: absolute;
			visibility: hidden;
		}

		.switch__button {
			width: 35px;
			height: 35px;
			border-radius: 50%;
			display: block;
			background: #000;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
			transition: transform 200ms;
		}

		.switch__option {
			position: absolute;
			color: #fff;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
		}

		.switch__option:last-child {
			opacity: 1;
		}

		.switch__control:checked + .switch__button {
			transform: translate(-100%, -50%);
		}

		.switch__control:checked + .switch__button .switch__option {
			opacity: 1;
		}

		.switch__control:checked + .switch__button .switch__option:last-child {
			opacity: 0;
		}

  </style>
</head>
<body>


  <label class="switch" for="switch-control">
		<input type="checkbox" id="switch-control" class="switch__control" />
		<div class="switch__button">
			<div class="switch__option">FR</div>
			<div class="switch__option">EN</div>
		</div>
		<div class="switch__labels">
			<div class="switch__label">FR</div>
			<div class="switch__label">EN</div>
		</div>
  </label>

  <script src="jquery.js"></script>
  <script type="text/javascript">
		$(function(){

		});
  </script>
</body>
</html>