Advanced Search

Toggle approve button

/ Published in: CSS
Save to your folder(s)
Toggle approve button, compatible with IE9, not working in IE7 or below

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .toggle { width:200px; position:relative; display:block; border:0; margin:0; padding:0; }  
  2. .toggle label { position:relative; z-index:3; display:block; width:100%; padding:3px 0; cursor:pointer;}  
  3. .toggle input { position:absolute; opacity:0; z-index:5; }  
  4. .toggle input:focus ~ .toggle-button { outline:1px dotted #fff; }  
  5. .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; }  
  6. .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; }  
  7. .toggle input:checked ~ span { right:60px; }  
  8. .toggle input:checked + label:after { background-color:#a0c66b; color:#60783f; border-color:#87aa5b; }
  9.  
  10. <!--[if IE 9]>
  11. 	<style type="text/css">
  12. 		.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	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; }  
  13. 	</style>
  14. <![endif]-->

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.