Dynamic Yes/No Form with CSS3
HTML
<form action="">
<input type="radio" name="rdo" id="yes" checked />
<input type="radio" name="rdo" id="no"/>
<div class="switch">
<label for="yes">Yes</label>
<label for="no">No</label>
<span></span>
</div>
</form>
STYLUS
green = #00bc9c
red = #eb4f37
body
font-family sans-serif
font-weight 800
background #433A3F
.switch
position absolute
top 50%
left 50%
width 150px
height 50px
text-align center
margin -30px 0 0 -75px
background green
transition all 0.2s ease
border-radius 25px
span
position absolute
width 20px
height 4px
top 50%
left 50%
margin -2px 0px 0px -4px
background white
display block
transform rotate(-45deg)
transition all 0.2s ease
&:after
content ""
display block
position absolute
width 4px
height 12px
margin-top -8px
background white
transition all 0.2s ease
input[type=radio]
display none
.switch label
cursor pointer
color rgba(#000, .2)
width 60px
line-height 50px
transition all 0.2s ease
label[for=yes]
position absolute
left 0px
height 20px
label[for=no]
position absolute
right 0px
#no:checked ~ .switch
background red
#no:checked ~ .switch span
background white
margin-left -8px
&:after
background white
height 20px
margin-top -8px
margin-left 8px
#yes:checked ~ .switch label[for=yes]
color white
#no:checked ~ .switch label[for=no]
color white
2 Responses