Hướng dẫn button css đẹp
Sau khi đã tìm hiểu xong bài tạo chuyển động animation trong CSS3 thì bài này mình sẽ áp dụng nó vào việc code một button animation theo kiểu rắn ăn mồi cho mọi người cùng ôn lại luôn. Show 1. Tạo khung HTML.Đầu tiên mình sẽ tạo khung HTML và các thẻ cần thiết.
Chạy Code 2. CSS cơ bản cho button.Sau khi đã HTML khung cơ bản xong, tiếp tục mình sẽ CSS cho thẻ a ở giữa màn hình và background tối màu cho mọi người dễ nhìn.
Chạy Code 3. CSS border cho button.Tiếp tục chúng ta sẽ css cho 4 thẻ span bên trong thẻ a thành border.
Chạy Code Tiếp theo đó chúng ta sẽ gradient màu sắc cho 4 thẻ span.
Chạy Code Giờ lom đã có vẻ đẹp hơn một chút rồi đó 4, Tạo chuyển động - animation.OK, sau khi đã css cơ bản tương đối đẹp rồi giờ chúng ta sẽ tạo ra chuyển động cho nó.
Phía trên là chuyển động lên xuống trái phải cho từng thẻ span, giờ chúng ta sẽ thiết lập từ thẻ span ứng với từng animation.
Chạy Code Chuyển động đã tương đối đẹp rồi, nhưng để đẹp hơn chúng ta cần ẩn những chi tiết khi chuyển động lòi ra bên ngoài thẻ
Chạy Code Như vậy là done, nếu bạn cần chuyển động nhanh hay chậm hơn thì bạn có thể thay đổi thời gian sao cho hợp ý bạn. |