Posted By

msstar on 10/09/12

Tagged

css toggle-button

Versions (?)

Toggle approve button

/ Published in: CSS

Toggle approve button, compatible with IE9, not working in IE7 or below

Highlighted TextExpand

.toggle { width:200px; position:relative; display:block; border:0; margin:0; padding:0; }  
.toggle label { position:relative; z-index:3; display:block; width:100%; padding:3px 0; cursor:pointer;}  
.toggle input { position:absolute; opacity:0; z-index:5; }  
.toggle input:focus ~ .toggle-button { outline:1px dotted #fff; }  
.toggle label:after { position:absolute; top:0; right:20px; z-index:0; display:block; width:80px; height:17px; background-color:#dd7e6d; border:1px solid #b15b4d; border-radius:2px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.17), 0 1px 0 rgba(255,255,255,0.9); content:"No \a Yes"; white-space:pre; color:#8f5247; font-weight:700; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,0.4); -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; padding:2px 0; }  
.toggle span { display:block; position:absolute; right:20px; top:-2px; z-index:4; width:40px; height:25px; border:1px solid #bbb; background-color:#f7f7f7; background-image:linear-gradient(top,#f7f7f7,#ececec); box-shadow:inset 0 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.12); border-radius:2px; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; }  
.toggle input:checked ~ span { right:60px; }  
.toggle input:checked + label:after { background-color:#a0c66b; color:#60783f; border-color:#87aa5b; }

Report this snippet Tweet

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Toggle approve button

Related snippets

Choose a language for easy browsing: