Toggle switch choose language

i want to do a toggle switch for language, but i don’t have exactly idea how to do it. It’s css with html and i wrote this


<div class="toggle toggle--neon">
			<input type="checkbox" id="toggle--neon" class="toggle--checkbox">
			<label class="toggle--btn" for="toggle--neon" data-label-on="on"  data-label-off="off"></label>


input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
label {
  cursor: pointer;
  text-indent: -9999px;
  width: 200px;
  height: 100px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 90px;
  height: 90px;
  background: url('/images/lang-en.png') no-repeat top left;
  border-radius: 90px;
  transition: 0.3s;
input:checked + label {
  background: url('/images/lang-es.png') no-repeat top left;
input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
label:active:after {
  width: 130px;

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


1 Like

@RandellDawson ty i edited again with more information