<div class="centerer">
  <p>Type in a password and click on the toggle</p>
  <input type="password" class="password" />
  <div class="toggle ml2">
    <div class="toggle-button"></div>
  </div>
</div>
$distance: 40px - (16px * 1.25) + 1;

.ml2{
  margin-left: 2 * 1rem;
}

.toggle{
  background: #ccc;
  border-radius: 40em;
  cursor: pointer;
  display: inline-block;
  padding: 1px;
  position: relative;
  width: 40px;
  height: 1.25rem;
  user-select: none;
  vertical-align: middle;
}

.toggle:before, .toggle:after{
  color: darken(#aaa, 20%);
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
}

.toggle:before{
  content: "✱✱✱";
  font-size: 10px;
  right: 110%;
}

.toggle:after{
  content: "ABC";
  font-size: 12px;
  left: 110%;
}

.toggle.is-alpha .toggle-button{
  left: $distance;
}

.toggle-button{
  background: #fff;
  border-radius: 40em;
  display: inline-block;
  height: 1.25rem;
  width: 1.25rem;
  position: absolute;
  left: 1px;
  top: 1px;
  transition: left 0.05s linear;
}

.centerer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
View Compiled
$(".toggle").on "click", () ->
  password = $(".password")
  type = password.attr "type"
  if type == "password"
    password.attr "type", "text"
    $(this).addClass "is-alpha"
  else
    password.attr "type", "password"
    $(this).removeClass "is-alpha"
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js