Hướng dẫn tạo progress button với CSS3 và HTML5
Hôm nay mình sẽ hướng dẫn các bạn cách thức tạo một nút loading hay progress button với hiệu ứng độc đáo và sáng tạo bằng CSS3 và HTML5. Với phong cách thiết kế phẳng (flat style) và 3D, những thiết kế bên dưới sẽ góp phần đem lại sự sáng tạo, hiện đại và không kém phần hấp dẫn trong thiết kế tổng quát của bạn. Lưu ý: Chúng ta sẽ sử dụng mã transitions dựa trên pseudo-elements, mã này hiện vẫn chưa được hỗ trợ đầy đủ bởi tất cả các trình duyệt (ví dụ như Safari và Mobile Safari). Ngoài ra cũng cần chú ý thêm rằng ở đây chúng ta sử dụng mã transform-style: preserve-3d mà hiện tại thì chưa được hỗ trợ đầy đủ trên trình duyệt IE10 và IE11. Đầu tiên, chúng ta cần tạo một nút Submit đơn giản bằng mã HTML5 <button class="progress-button" data-horizontal="" data-perspective="" data-style="rotate-angle-bottom">Submit</button> Và chuyển đổi thành cấu trúc như bên dưới: <button class="progress-button" data-style="rotate-angle-b…
