按钮效果 css_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:20:561029검색
<!doctype html><br /><html lang="en"><br /><head><br /> <meta charset="UTF-8"><br /> <title>Document</title><br /> <style><br /> .toggle > div {<br /> width: 100px;<br /> height: 40px;<br /> border-radius: 20px;<br /> background: #fff;<br /> position: relative;<br /> border: solid 2px #e6e6e6;<br /> transition: all ease-in-out 0.25s 0s;<br /> display: inline-block;<br /> }<br /><br /> .toggle > div div {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> height: 40px;<br /> width: 40px;<br /> border-radius: 50%;<br /> box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);<br /> transition: all ease-in-out 0.25s 0s;<br /> }<br /><br /> .clearfix:after {<br /> clear: both;<br /> font-size: 0;<br /> height: 0;<br /> display: block;<br /> visibility: hidden;<br /> content: " ";<br /> line-height: 0<br /> }<br /><br /> .clearfix {<br /> zoom: 1<br /> }<br /><br /> /* for IE6 IE7 */<br /> .toggle input:checked + .ss {<br /> background: #4cd964;<br /> border-color: #4cd964;<br /> }<br /><br /> .toggle input:checked + .ss div {<br /> transform: translate3d(60px, 0, 0);<br /> background-color: #fff;<br /> }<br /> </style><br /></head><br /><body><br /><label class="toggle "><br /> <input type="checkbox" checked style="display: none"><br /><br /> <div class="ss"><br /> <div></div><br /> </div><br /></label><br /><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /><div></div><br /></body><br /></html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.