0

Necesito hacer este tipo de switch toggle por medio de css, si bien probé una alternativa, no me estaria saliendo como el ejemplo adjunto

Imagen

1 respuesta 1

1

body,
html {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 100%;
  z-index: -1;
}

.btn {
  border: 3px solid #f0eff2;

  display: inline-block;
  padding: 5px;
  position: relative;
  text-align: center;
  -webkit-transition: background 600ms ease, color 600ms ease;
  transition: background 600ms ease, color 600ms ease;
}

input[type="radio"].toggle {
  display: none;
}
input[type="radio"].toggle + label {
  cursor: pointer;
  min-width: 97px;
  height: 18px;
}
input[type="radio"].toggle + label:hover {
  background: none;
  color: #345fac;
}
input[type="radio"].toggle + label:after {
  background: #345fac;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  -webkit-transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 100%;
  z-index: -1;
  border-radius: 50px;
}
input[type="radio"].toggle.toggle-left + label {
  border-right: 0;
  -webkit-border-top-left-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius-topleft: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  z-index: 3;
}
input[type="radio"].toggle.toggle-left + label:after {
  left: 100%;
}
input[type="radio"].toggle.toggle-right + label {
  margin-left: -5px;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomright: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #f0eff2;
}
input[type="radio"].toggle.toggle-right + label:after {
  left: -100%;
}
input[type="radio"].toggle:checked + label {
  cursor: default;
  color: #fff;
  -webkit-transition: color 200ms;
  transition: color 200ms;
}
input[type="radio"].toggle:checked + label:after {
  left: 0;
}
.pesos {
  position: absolute;
  top: -10px;
  left: 13px;
  z-index: 3;
}
.dolares {
  position: absolute;
  top: -10px;
  right: 13px;
  z-index: 3;
}
<input
      id="toggle-on"
      class="toggle toggle-left"
      name="toggle"
      value="false"
      type="radio"
      checked
    />
    <label for="toggle-on" class="btn"><p class="pesos">En Pesos</p></label>
    <input
      id="toggle-off"
      class="toggle toggle-right"
      name="toggle"
      value="true"
      type="radio"
    />
    <label for="toggle-off" class="btn">
      <p class="dolares">En Dólares</p>
    </label>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.