Necesito hacer este tipo de switch toggle por medio de css, si bien probé una alternativa, no me estaria saliendo como el ejemplo adjunto
1 respuesta
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>