HTML CSS – Hiệu ứng hover (P2)

0
301

[VIDEO TUT]

  • Đang cập nhật…
Bấm Subscribe Nhận video học mới nhất :

1. Giới thiệu

  • Trong phần tiếp theo này tôi sẽ hướng dẫn cho các bạn tạo hiệu ứng hover với <button> tạo nên hiệu ứng mượt mà và nhẹ nhàng cho trang web của các bạn.

2. Demo

  • Tôi có mã HTML sau:

  • Như vậy là đã có nút với dòng chữ click me rồi đúng không nào
  • tiếp theo tôi có mã CSS:

  • Như vậy là đã định hình được nút button của tôi, tôi sẽ tạo tiếp hover khi ta hơ mouse vào thì sẽ như này:

  • Giờ công đoạn tiếp theo là làm cho nó đẹp hơn với đoạn mã thì trong đoạn css chắc hẳn bạn cũng đã biết đến before và after

  • Và after

  • Vẫn chưa xong đâu nhé. Tiếp theo chúng ta phải thêm thuộc tính hover vào before và after nữa:

  • Kết quả hiển trị trên trình duyệt:

Before:

1

After:

1

  • Các bạn hãy thử sẽ rất khác biệt đấy

3. Lời kết

  • Như vậy là tôi đã hướng dẫn các bạn về hiệu ứng hover với button trong phần 2 này. Hi vọng các bạn sẽ áp dụng được vào bài của mình.Chúc các bạn học thật tốt.

Tham khảo các bài học html và css khác tại đây:

Tác giả: Hà Trần Vietpro

[Total: 1    Average: 4/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here