Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Thiết kế Button có style giống với iOS
Thiết kế Button có style giống với iOS
Nguyễn Trung Hiếu
Share Code Web Company 2014

Thiết kế Button có style giống với iOS

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.
iOS style switch button

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

CSS

Với đoạn CSS trên, chúng ta sẽ được
switch button

switch button

switch button

switch button

Jquery

Với jquery làm nhiệm vụ switch khi người dùng nhấn chọn để chuyển class thôi.

Vậy là xong rồi đó, chúc các bạn có nút button đẹp cho website của mình

Download code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}