Button download và demo đẹp từ CSS

Trên blog đôi khi bạn sẽ cung cấp cho người đọc một liên kết để đi đến trang demo hoặc là đến trang download. Để làm nổi bật nhưng liên kết này người ta thường thêm một chút CSS để trong nó đẹp hơn. Hôm nay mình xin giới thiệu hai nút demo và download mà mình mới làm được, nó có kết hợp thêm hiệu ứng hover và sử dụng thêm icon Awesome.

#DEMO

DEMO Download

#Thêm CSS

1. Đăng nhập Blogger

2. Mẫu > Chỉnh sửa HTML

3. Tìm thẻ ]]></b:skin>

4. Dán code dưới vào trước thẻ mà bạn vừa tìm

.post a.demo, .post a.download{margin:5px;padding:5px;line-height:30px; border:solid 1px #ea5c35;display:inline-block; text-decoration:none;font-family:arial;font-weight:bold;font-size:30px;color:#000;

box-shadow:inset 0 -4px 0 0 #ea5a59;transition:all 0.5s ease-in-out;

}
.post a.demo:hover, a.download:hover{color:#fff;box-shadow:inset 0 -54px 0 0 #ea5c35;}
.post a.demo:before{content:"\f197"}
.post a.demo:before{content:"\f06e";}
.post a.download:before{content:"\f0ed";}
.post a.demo, .post a.download{display:inline-block;font:normal normal normal 30px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}

#Thêm font Awesome

1. Tìm thẻ </head>
2. Dán thẻ dưới vào trước thẻ mà bạn vừa tìm

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="all"/>

3. Lưu mẫu lại

#Sử dụng

Khi sử dụng mà muốn sử dụng các bạn chuyển qua soạn thảo HTML, chọn code dưới và dán vào:
Code nút demo

<a href="#" class="demo"> DEMO</a>

Code nút download

<a href="#" class="download"> Download</a>

Các bạn thay # thành URL của liên kết, sau đó chuyển qua soạn thảo bình thường và tiếp tục viết bài.