Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn truyền tải?

Trong video này tôi chia sẻ bạn cách tư duy để tạo ra một một nút bấm link icon button chất lượng.

Video hướng dẫn tạo Link Icon Button với Html Css

Mã code tạo Link Icon Button

Bên dưới là full mã code tạo button messenger và youtube. Trước hết bạn hãy tự thực hành để xem mình đang yếu ở chổ nào.

Nếu có đoạn nào chưa ổn thì bạn có thể xem code mẫu để chỉnh lại cho chuẩn nhất.

    
    
    
    
    



    
    

        
Tạo link icon button css
        

            
                
                    
                
                
                    Chat ngay
                
            
            
                
                    
                
                
                    Chat ngay
                
            
        

    

Bạn thất link icon button thế nào? Bạn hiểu được những chia sẻ trong bài học này chứ? Quá trình xem video bạn có vướng mắc gì hãy để lại ở comment, tôi sẽ dành thời gian hỗ trợ bạn nhiều hơn.

Nếu bạn đang học Html css nhưng không có một lộ trình bài bản bạn có thể tham khảo thêm chương trình Html Css 21 Ngày, hiện tại đã có trên 1038 người theo học và đi làm tốt.

Cách đơn giản nhất để thêm biểu tượng(icon) vào trang HTML của bạn là sử dụng thư viện icon, chẳng hạn như Font Awesome.

Thêm tên của lớp icon được chỉ định vào bất kỳ phần tử HTML nội tuyến nào (như

1 hoặc

2).

Tất cả các biểu tượng trong thư viện biểu tượng bên dưới, là các vectơ có thể mở rộng và có thể được tùy chỉnh bằng CSS (kích thước, màu sắc, bóng, v.v.)

1.2. Font Awesome Icons

Để sử dụng các biểu tượng Font Awesome, hãy truy cập fontawesome.com, đăng nhập và nhận code để thêm vào phần

3 của trang HTML của bạn:

Lưu ý: Không cần tải xuống hoặc cài đặt!

Copy and chạy code

1.3 Bootstrap Icons

Để sử dụng các glyphicons Bootstrap, hãy thêm dòng sau vào trong phần

3 của trang HTML của bạn:

Lưu ý: Không cần tải xuống hoặc cài đặt!

Copyand chạy code

1.4 Google Icons

Để sử dụng các biểu tượng của Google, hãy thêm dòng sau vào bên trong phần

3 của trang HTML của bạn:

Lưu ý: Không cần tải xuống hoặc cài đặt!

 






cloud
favorite
attachment
computer
traffic


 

2. Links trong CSS

2.1. Links với style

Các liên kết có thể được tạo kiểu với bất kỳ thuộc tính CSS nào (ví dụ:

6,

7,

8, v.v.).

This is a link

Ngoài ra, các liên kết có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.

Bốn trạng thái liên kết là:

• 9– một liên kết bình thường, không được truy cập

• 0 – liên kết mà người dùng đã truy cập

• 1 – một liên kết khi người dùng di chuột qua nó

• 2 – một liên kết tại thời điểm nó được nhấp vào

 /* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
} 

Khi đặt kiểu cho một số trạng thái liên kết, có một số quy tắc thứ tự:

• a: hover PHẢI đến sau a:link và a:visited
• a:active PHẢI đến sau after a:hover

2.2. Text Decoration

Thuộc tính text-decoration chủ yếu được sử dụng để xóa gạch dưới khỏi các liên kết:

This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

2.3 Background Color

This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

2.4. Link Buttons

Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các liên kết dưới dạng boxes / nút:

0

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa: