TẠO BUTTON VỚI HIỆU ỨNG CHUYỂN ĐỘNG ANIMATION

Hướng dẫn tạo Button với hiệu ứng chuyển động Animation

Hello, chào mừng các bạn đến với bài viết tiếp theo của Anh Tuấn Blog. Hôm nay, mình sẽ chia sẻ cho các bạn bộ button sử dụng hiệu ứng chuyển động Animation trong CSS3.

Button với hiệu ứng chuyển động Animation

CSS Animation là gì?

Animation được hiểu là hiệu ứng chuyển động, sử dụng để tạo hiệu ứng di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay.

Để tạo một chuyển động Animation, bạn cần phải có các keyframe. Mỗi keyframe sẽ được chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao...

Giới thiệu qua vậy thôi, ở bài viết này mình sẽ không nói nhiều về chuyển động Animation mà sẽ hướng dẫn các bạn tạo và sử dụng button Animation.

Hướng dẫn tạo Button

• Copy dòng Code dưới đây:

<link href='https://kenbtec.github.io/buttonanimation/style.css' rel='stylesheet'/>

• Dán toàn bộ code đã copy phía trên vào trước thẻ đóng </body>
• Lưu lại!

Mẫu và hướng dẫn sử dụng Button

Dưới đây là 16 mẫu button với hiệu ứng Animation khác nhau. Các bạn sử dụng mẫu nào thì copy code tương ứng với mẫu đấy!

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-1" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog">Read More</button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-2" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog">Read More</button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-3" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-4" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-5" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-6" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-7" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-8" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-9" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-10" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-11" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-12" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Click!</span><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-13" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-14" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-15" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

<center><button class="anhtuanblog-custom-btn anhtuanblog-btn-16" onclick="window.open('https://www.ngohoanganhtuan.net/')" target="blank" title="Anh Tuấn Blog"><span>Read More</span></button></center>

Tổng kết

Trên đây là toàn bộ code và hướng dẫn tạo button với hiệu ứng chuyển động Animation. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Reference:
code.pro.vn