Quan trọng
Đăng ngày: 22:59 05-06-2008
#Request by Fe.
Trước đây cũng đã có nhiều người và nhiều đoạn code hướng dẫn dành cho việc xử lý đường link, nhưng chắc chưa có ai hướng dẫn về vụ biến một đường link quan trọng nào đó trong bài thành dạng "button". VD:
Hehe, kiểu này nhìn trông bắt mắt hơn phải không? Hiệu ứng này vốn đã định làm thay thế cho cái Quick Links mới, nhưng vẫn chưa có thời gian nên lại thôi. Nay có "bệnh nhân" đến hỏi "xin thuốc" thì ta lên núi hái về luôn vậy 
.
Ý tưởng thì cũng đơn giản, ta tạo một style id mới với tên là btn_link trong CSS có code như sau:
Code:
#btn_link { background:#0066FF; border-color:#FFFFFF; border-style:outset; color:#B0FFFF; font-weight:600;text-decoration:none;}
#btn_link:hover { background:#FF6600; border-color:#FFCC66; border-style:outset; color:#FFFFFF; font-weight:bolder;text-decoration:none;}
|
Ta tạo thêm style cho trạng thái hover để khi di chuột vào nút thì màu nền và màu chữ sẽ đổi màu, nếu ai không thích có thể bỏ dòng dưới đi không sao cả. Những phần màu xám là giá trị bạn có thể tùy chọn để thêm vào, còn những phần còn lại tốt nhất không nên thay đổi, để đảm bảo cho đường link của chúng ta trông giống như một button thật sự =).
Sau khi chèn code vào CSS, để sử dụng được style này cho đường link, thì bạn chèn một thẻ div bên trong đường link, VD như với cái nút My Homepage phía trên:
Code:
<a href="http://vn.myblog.yahoo.com/A-chi"><div id="btn_link" style="padding: 5px; width: 115px; text-align: center;font-size:14px;">My HomePage</div></a>
|
Tương tự hãy thay đường link và dòng text miêu tả cho phù hợp với mục đích của bạn, có điều phần width nên giới hạn trong khoảng 50px đến 150px để đảm bảo "button" không quá dài hay quá ngắn, nhìn không hay lắm, nói chung cũng còn tùy vào độ dài của dòng text miêu tả. Về kích thước font chữ thì nên dùng ở mức 12-16px thôi, còn ai thích dùng cỡ chữ to hơn nữa thì tùy.
Trên đây chỉ là cách đơn giản nhất để biến một đường link thành dạng nút và có đổi màu nền khi di chuột vào. Nếu có hiểu biết sâu hơn về CSS bạn có thể tùy biến code để thay nền của button thành một bức ảnh, mang phong cách riêng của từng người.
Edit: Quên không để ý sự hiển thị khác nhau của hai loại trình duyệt FF và IE, giờ đã thay đổi lại một chút ở code để đảm bảo kết quả như mong muốn 
.
-- Thông tin chính thức phát hành hôm nay 06:00 AM - 06/06/08 
.
Author: m3Noa - 05 Jun, 2008 - Copyright © 2008.
*Please ask for permission before copying this.
X.X[19.02!08]X.X 16:09 06-07-2009
beo.ht_it 21:14 01-12-2008
cô bé diệu kì_2008 21:08 01-12-2008
n2tboy 23:26 15-11-2008
n2tboy 15:54 15-11-2008
dfdfdf 18:16 14-11-2008
Invi Game 13:27 17-09-2008
Noa04:40 20-09-2008
#img_hover { background:url(/* image_link_1 */) center no-repeat; border-color:#FFFFFF; border-style:outset; color:#B0FFFF; font-weight:600;text-decoration:none;}
#img_hover:hover { background:url(/* image_link_2 */) center no-repeat; border-color:#FFCC66; border-style:outset; color:#FFFFFF; font-weight:bolder;text-decoration:none;}
Nếu chỉ cần mình ảnh thôi thì mấy đoạn code tùy chỉnh border phía sau bỏ đi cũng đc =).
Để áp dụng trong bài viết thì chèn code HTML như sau:
<a href="<!-- *link_url* -->"><div id="img_hover" style="padding: 5px; width: Mpx; height:Npx; text-align: center;font-size:14px;"><!-- content or null --></div></a>
Nhớ là phải tùy chỉnh 2 giá trị M,N bằng kích thước của 2 ảnh trên để nội dung của ảnh được hiển thị hết nhé =).
[W].Dephia 19:34 08-06-2008
Guynne Bin 00:17 08-06-2008
[W].Dephia 00:30 06-06-2008
Noa00:33 06-06-2008
Fe 00:29 06-06-2008
Không thể hay hơn !
Tại hạ chữa xong bệnh này rồi thì sẽ hỏi thầy thuốc phương nào mà cao cơ thế !
Ở thành phố HCM thì một hôm cafe ở Hàn Thuyên !
Còn ở chỗ khác thì ..........rất cảm ơn ! Chất lượng thuyết phục quá !
Noa00:32 06-06-2008
Vũ Nguyễn 00:26 06-06-2008