Hướng dẫn sử dụng CSS3 để tạo nút 3D

Bên dưới là hình ảnh demo cho bạn kết quả cuối cùng mà bạn sẽ đạt được sau khi bạn hoàn thành xong bài viết hướng dẫn này. Đầu tiên thì bạn hãy tạo một tập tin .html hoặc .php gì đó cũng được, tùy vào sở thích của bạn mà tạo. Bên trong thẻ body bạn sẽ khai báo một vài nút cơ bản, cụ thể trong bài viết này tôi sẽ đăng 4 nút với 4 màu khác nhau.

Trong tập tin .css của bạn hãy khai báo một vài thông tin cần thiết để hiển thị màu nền của khung demo. Trong tập tin css này cũng sẽ bao gồm những thuộc tính được khai báo để hiển thị các nút theo kiểu 3D.



Thuộc tính .button với những khai báo chung cho tất cả các nút, đối với các thuộc tính có kèm thêm màu là khai báo tùy biến để hiển thị màu sắc khác nhau cho các nút khác nhau.

Như vậy qua bài viết này bạn đã biết được cách tạo nút 3D với CSS3, bạn có thể làm được rất nhiều nhiều thứ thông qua phiên bản CSS mới này. Nhiều nhà thiết kế đã dựa vào tính năng của CSS3 để tạo ra những giao diện tuyệt đẹp, họ không cần phải dùng nhiều hình ảnh trong giao diện như trước đây nữa.