Cách tạo liên kết bằng hình ảnh di chuột trong CSS đơn giản

Bài viết được viết bởi:
  • Thiết kế website
  • Cập nhật: Tháng Tám 02, 2013

Di chuột là gì? Định nghĩa được trích dẫn từ UWStout.edu:

'Hover' là hiệu ứng xảy ra khi bạn đặt con trỏ lên bất kỳ loại liên kết nào. Liên kết có thể được mã hóa để đáp ứng với di chuột bằng cách thay đổi màu sắc, hiển thị đồ họa mới hoặc thậm chí phát tệp âm thanh.

Hiệu ứng di chuột sẽ cải thiện khả năng sử dụng của web và giúp chủ sở hữu web hướng trực tiếp các giao thông web của họ. Khi bạn muốn người dùng web của mình chú ý nhiều hơn đến một liên kết đặc biệt, một cách hay để làm như vậy là tạo một liên kết với hiệu ứng di chuột hấp dẫn. Một hiệu ứng di chuột đơn giản như thế này (một gạch chân đơn giản và thay đổi màu văn bản) cho biết những văn bản đó là 'có thể nhấp' và cải thiện các tương tác web. Tuy nhiên, thay đổi màu sắc và kiểu văn bản (gạch chân / gạch chân / in đậm) là rất cơ bản và có rất nhiều điều có thể được thực hiện với di chuột.

Trong bài viết này, tôi sẽ trình bày cách bạn có thể tạo các liên kết đẹp mắt với hiệu ứng di chuột.

Ví dụ 1: Liên kết bằng nút di chuột

Đầu tiên, hãy xem ví dụ làm việc (đặt chuột qua liên kết để xem cách hoạt động - thay đổi biểu tượng ở bên cạnh).

Ví dụ 1 - Liên kết với hình ảnh nút di chuột

Đây là phiên bản hoàn chỉnh của những gì sẽ được xây dựng trong ví dụ này.

Làm thế nào chúng ta tạo ra nó trong CSS đơn giản?

Hình ảnh nút

Bước 1, như bạn có thể thấy, chúng ta cần một biểu tượng mũi tên trong hai phiên bản khác nhau. Trong ví dụ của chúng tôi, tôi đã sử dụng màu đỏ (#CC3300) làm nút liên kết mặc định; và màu xám (#333333) cho hiệu ứng di chuột. Nút này có thể dễ dàng thực hiện bằng bất kỳ phần mềm chỉnh sửa hình ảnh nào.

Bây giờ chúng ta có nút màu đỏ (nói, b1.png) và màu rey (nút nói, b2.png). Hợp nhất hai tệp này thành một tệp hình ảnh với b1.png ở trên cùng của b2.png. Đây sẽ là hình ảnh cuối cùng của chúng tôi cho liên kết. Đặt tên cho nó (nói, x.png) và tải lên vị trí mong muốn (đối với trường hợp của tôi, tôi đặt nó trong thư mục mẫu WP của tôi).

Cho bạn tham khảo:

b1.png , b2.png và x.png

Mã CSS

Tiếp theo, trên mã CSS. Về cơ bản những gì chúng tôi muốn đạt được là thụt lề văn bản liên kết ở bên phải để tạo không gian cho nút; và đồng thời, hiển thị hình ảnh khác khi liên kết ở trạng thái di chuột. Đây là những chất liệu khá cơ bản, ngoại trừ việc chúng ta cần một chút thay đổi về vị trí nền. Bí quyết là hiển thị phần trên của hình ảnh (nút màu đỏ) cho liên kết ban đầu; và khi di chuột, hãy thay đổi hình nền bằng lề -11px (nó có thể khác trên trang web của bạn) để hiển thị nút màu xám.

.xa {màu: #cc3300; đệm-trái: 14px; font-weight: in đậm; hình nền: url (hình ảnh / x.png); vị trí nền: 0 2px; lặp lại nền: không lặp lại; }
.xa: hover {màu: #333333; đệm-trái: 14px; font-weight: in đậm; hình nền: url (hình ảnh / x.png); vị trí nền: 0 -11px; lặp lại nền: không lặp lại; }

Thực hiện

Để thể hiện hiệu ứng di chuột này, chỉ cần chèn lớp x vào khu vực được chỉ định. Đây là một ví dụ về cách bạn có thể làm điều đó.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Trang chủ </a> </ p>

Ví dụ 2: Liên kết trong nền di chuột

Với cùng một khái niệm, có vô số cách bạn có thể làm cho các liên kết của mình trông thật tuyệt. Đây là một ví dụ khác về những gì chúng ta có thể làm với các hiệu ứng di chuột với một phương thức hơi khác. Một lần nữa, hãy xem phiên bản hoàn thiện.

Ví dụ 2 - Liên kết trong nền di chuột

Trong ví dụ này, những gì tôi sẽ làm là tạo một siêu liên kết có nút được chọn, nơi nền sẽ thay đổi khi người dùng đặt chuột lên đó.

Làm thế nào chúng ta tạo ra nó trong CSS đơn giản?

Hình nền

Đầu tiên, tạo hai hình ảnh của hình chữ nhật tròn. Đối với mục đích trình diễn, chúng tôi sẽ không hợp nhất hai hình ảnh này trong ví dụ này. Chúng tôi sẽ đặt tên hình chữ nhật màu đỏ (#CC3300) là b1.png; và hình chữ nhật maroon (#9F2800) là b2.png.

Mã CSS

Tiếp theo, đây là các mã cho biểu định kiểu của bạn (chúng tôi đang đặt tên lớp 'y' trong ví dụ thứ hai này).

ay {chiều rộng: 280px; chiều cao: 42px; màu: #000000; phần đệm: 10px; trang trí văn bản: không có; hiển thị: khối; font-weight: in đậm; hình nền: url (hình ảnh / b1.png); lặp lại nền: không lặp lại; }
ay: hover {width: 280px; chiều cao: 42px; màu: #FFFFFF; phần đệm: 10px; font-weight: in đậm; trang trí văn bản: không có; hiển thị: khối; hình nền: url (hình ảnh / b2.png); lặp lại nền: không lặp lại; }

Thực hiện

Để hiển thị liên kết, đơn giản chèn lớp (y) vào thẻ <a href> trong mã nguồn của bạn. Thí dụ:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Trang chủ </a>

Kết thúc

Tôi hy vọng bài viết này mang lại cho bạn thông tin có giá trị và truyền cảm hứng cho một số bạn sử dụng CSS theo cách sáng tạo. Nếu có bất kỳ điểm nào khác mà bạn nghĩ tôi nên thêm vào trong hướng dẫn này, vui lòng để lại ý tưởng của bạn trong phần bình luận.

Hướng dẫn CSS khác

Nếu bạn thích bài đăng này, hãy chắc chắn cũng kiểm tra Cách sử dụng hiệu quả hoạt ảnh CSS 3, Phải đọc CSS 3 Tutorials 2012, Cũng như Làm cho trang web của bạn trở nên thú vị với các kỹ thuật CSS 3 này.

Về Jerry Low

Người sáng lập WebhostingSecretReveal.net (WHSR) - một đánh giá lưu trữ được người dùng 100,000 tin cậy và sử dụng. Hơn nhiều năm kinh nghiệm trong lĩnh vực lưu trữ web, tiếp thị liên kết và SEO. Cộng tác viên của ProBlogger.net, Business.com, SocialMediaToday.com, v.v.