<div class="formBox1">
<form action="">
<input type="radio" name="radioAni1" id="radioAni11">
<input type="radio" name="radioAni1" id="radioAni12">
<div class="label">
<label class="label1" for="radioAni11"><span></span></label>
<label class="label2" for="radioAni12"><span></span></label>
</div>
</form>
</div>
<div class="formBox2">
<form action="">
<input type="radio" name="radioAni1" id="radioAni21">
<input type="radio" name="radioAni1" id="radioAni22">
<div class="label">
<label class="label1" for="radioAni21"><span></span></label>
<label class="label2" for="radioAni22"><span></span></label>
</div>
</form>
</div>
<div class="formBox3">
<form action="">
<input type="radio" name="radioAni1" id="radioAni31">
<input type="radio" name="radioAni1" id="radioAni32">
<div class="label">
<label class="label1" for="radioAni31"><span></span></label>
<label class="label2" for="radioAni32"><span></span></label>
</div>
</form>
</div> .formBox1{width: 300px; height: 100px;}
.formBox1 input[type="radio"]{display: none}
.formBox1 .label{position: relative}
.formBox1 .label label{display: block; position: absolute; top:0; left:0; width: 50px; height: 25px; border-radius:20px; border: 1px solid #ccc;}
.formBox1 .label label span{position: absolute; top: 0; width: 25px; height: 25px; border-radius: 50%; background: #ccc;}
.formBox1 .label label.label1 span{ left: 0;}
.formBox1 .label label.label2 span{ right: 0; background: #ff0;}
.formBox1 .label label.label2{display: none;}
.formBox2{width: 300px; height: 100px;}
.formBox2 input[type="radio"]{display: none;}
.formBox2 .label{position: relative; width: 70px; height: 40px; transform: skewX(-15deg); overflow: hidden;}
.formBox2 .label label.label1{display:block; position: absolute; top: 0; left: 0; width: 70px; height: 40px; background: #ccc; }
.formBox2 .label label.label2{display:block; position: absolute; top: 0; left: -100%; width: 70px; height: 40px; background: #ff0;}
.formBox3{width: 300px; height: 100px;}
.formBox3 input[type="radio"]{display: none;}
.formBox3 .label{position: relative; width: 70px; height: 40px; overflow: hidden;}
.formBox3 .label label.label1{display:block; position: absolute; top: 0; left: 0; width: 70px; height: 40px; background: #ccc; transition: 0.3s;}
.formBox3 .label label.label2{display:block; position: absolute; top: 0; width: 70px; height: 40px; background: #ff0; transform: rotateX(90deg);transition: 0.3s;}
.formBox3 .label label.label1.filp{transform: rotateX(-90deg);}
.formBox3 .label label.label2.filp2{transform: rotateX(0);}$(".formBox1 .label label.label1").on('click',function(){
$(".formBox1 .label label.label1 span").animate({
"left":"25px",
"background":"#ff0"
},300,function(){
$(".formBox1 .label label.label1").hide();
$(".formBox1 .label label.label2").show();
$(".formBox1 .label label.label1 span").css({
"left":"0",
"background":"#ccc"
});
});
});
$(".formBox1 .label label.label2").on('click',function(){
$(".formBox1 .label label.label2 span").animate({
"left":"0",
"background":"#ccc"
},300,function(){
$(".formBox1 .label label.label2").hide();
$(".formBox1 .label label.label1").show();
$(".formBox1 .label label.label2 span").css({
"left":"25px",
"background":"#ff0"
});
});
});
$(".formBox2 .label label.label1").on('click',function(){
$(".formBox2 .label label.label2").animate({
"left":"0"
},300);
});
$(".formBox2 .label label.label2").on('click',function(){
$(".formBox2 .label label.label2").animate({
"left":"-100%"
},300);
});
$(".formBox3 .label label.label1").on('click',function(){
$(".formBox3 .label label.label1").addClass('filp');
setTimeout(function(){
$(".formBox3 .label label.label2").addClass('filp2');
},300);
});
$(".formBox3 .label label.label2").on('click',function(){
$(".formBox3 .label label.label2").removeClass('filp2');
setTimeout(function(){
$(".formBox3 .label label.label1").removeClass('filp');
},300);
});
External CSS
This Pen doesn't use any external CSS resources.