Bài viết này sẽ hướng dẫn các bạn thiết kế một nút switch button sử dụng css3 và jquery giống với các nút trong hệ điều hành iOS của Apple.
Bài viết được leech từ 9lessions.com, bạn có thể xem bài viết gốc tại đây
Đối với bài tuts này, các bạn có thể ứng dụng vào làm các button, các nút dạng shortcode trong wordpress cũng rất hay.
Code
HTML code
Để làm được bài này, chúng ta chỉ cần đoạn HTML đơn giản như dưới đây thôi
|
1 2 3 4 |
<label> <input type="checkbox" name="checkboxName" class="checkbox"/> <div class="switch"></div> </label> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.switch { width: 62px; height: 32px; background: #E5E5E5; z-index: 0; margin: 0; padding: 0; appearance: none; border: none; cursor: pointer; position: relative; border-radius:16px; //IE 11 -moz-border-radius:16px; //Mozilla -webkit-border-radius:16px; //Chrome and Safari } |
Với đoạn CSS trên, chúng ta sẽ được
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.switch:before { content: ' '; position: absolute; left: 1px; top: 1px; width: 60px; height: 30px; background: #FFFFFF; z-index: 1; border-radius:16px; //IE 11 -moz-border-radius:16px; //Mozilla -webkit-border-radius:16px; //Chrome and Safari } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.switch:after { content: ' '; height: 29px; width: 29px; border-radius: 28px; z-index: 2; background: #FFFFFF; position: absolute; -webkit-transition-duration: 300ms; transition-duration: 300ms; top: 1px; left: 1px; -webkit-box-shadow: 0 2px 5px #999999; box-shadow: 0 2px 5px #999999; } |
|
1 2 3 4 5 6 7 8 |
.switchOn , .switchOn:before { background: #4cd964 !important; } .switchOn:after { left: 21px !important; } |
Jquery
Với jquery làm nhiệm vụ switch khi người dùng nhấn chọn để chuyển class thôi.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.switch').click(function() { $(this).toggleClass("switchOn"); }); }); </script> |
Vậy là xong rồi đó, chúc các bạn có nút button đẹp cho website của mình
