Tạo nút nhấn tùy thích cho Blog

Chúng ta thường hay thấy ở trên website, blog có những nút nhấn Demo hay Download rất đẹp kèm theo cả hiệu ứng di chuột nữa. Vậy tại sao ko tự làm cho mình một nút để tiện sử dụng nhỉ? Blog của bạn sẽ sinh động hơn nhiều đấy.


Ah, view sources để lấy code, nhưng sao nó dài ngoàng thế này? Uhm, đúng là lấy code nhưng ta sẽ bỏ đoạn dài ngoàng đó vào một chỗ, khi nào cần dùng thì cầm tai nó kéo ra :D

Bạn nào muốn cái nút của mình thì làm theo dưới đây nhé. Các cao thủ đừng chém em nhé.

/*nutnhan*/

a.nutnhan{text-align:center;border:1px solid #202020;padding:5px 10px;line-height:50px;font-size:120%;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;text-decoration:none;background-color:#2E2E2E;color:#FFF;-moz-box-shadow:0 1px 2px #000,inset 0 1px 100px #202020;-webkit-box-shadow:0 1px 2px #000,inset 0 1px 100px #202020;box-shadow:0 1px 2px #000,inset 0 1px 100px #202020}

a.nutnhan:hover{background-color:#00BE98;-moz-box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E;-webkit-box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E;box-shadow:0 1px 2px #00251E,inset 0 1px 100px #00251E}

Các bác nhét đoạn code trên vào trước thẻ ]]></b:skin>   

 Đoạn code trên là mình view sources rồi coppy phần css về chỉnh sửa lại thông số màu sắc, kích thước cho phù hợp với Blog thôi chứ nhiều chỗ cũng chả hiểu nó để làm gì. Các bạn cũng sửa lại theo ý thích nhé.

Để lôi nó ra khi viết bài thì dùng đoạn html sau:

<div class="separator" style="clear: both; text-align: center;">

<a class="nutnhan" href="#" rel="nofollow" target="_blank">Xem Demo</a>&nbsp;

<a class="nutnhan" href="#" rel="nofollow" target="_blank">Tải Về</a></div>

 Dòng trên cùng đại loại là căn cho nó ở giữa trang
Dòng thứ 2 và 3 thay # bằng link demo và download

Muốn chèn thêm hình ảnh nữa thì các bạn cứ view sources cái nút nào mình thích rồi nghiêm cứu nha :D