Css nút download đẹp cho blog/web

Để website của bạn seo lên top thì không thể thiếu phần giao diện. Có thể nói giao diện là một làn da trắng mịn để thu hút người xem. Cũng vì vấn đề này mà các chuyên gia thiết kế website đã cho ra rất nhiều sản phẩm đẹp mắt và mềm mại.

Cụ thể lần này mình xin được share cho các bạn một button Download rất mượt mà

*DEMO bằng ảnh:

*DEMO:

DEMO.zip3.3 GB

Cách chèn vào website:
Copy đoạn CSS sau vào trước thẻ </head>, trong cặp thẻ <style>CSS</style>

/** hackergrousrlpprsc.blogspot.com **/
a.taitaitai.big{height:115px;line-height:115px;padding:0 80px;font-size:26px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
a.taitaitai.big:hover,a.taitaitai.big:focus{padding-right:160px}
a.taitaitai.big .details{top:10px;font-size:18px;line-height:20px;padding:6px 15px}
a.taitaitai.big:hover .details,a.taitaitai.big:focus .details{right:15px}
a.taitaitai .dlicon{display:block;font-size:55px;line-height:30px}
/** hackergrousrlpprsc.blogspot.com **/
@media screen and (max-width:620px){h1{font-size:2.7em}.center{width:30%}.centerbig{width:70%}}
@media screen and (max-width:480px){h1{font-size:2.2em}
.center{margin-left:0}
.centerbig{margin-left:-20px}
a.taitaitai.big{padding:0 70px}
a.taitaitai.big:hover,a.taitaitai.big:focus{padding-right:150px}

Chú ý: Nếu chèn vào mà bị xung đột CSS thì các bạn xóa dòng màu đỏ đi

Tiếp theo chèn đoạn html vào nơi mà bạn muốn button hiển thị, chèn sau thẻ <body>

<div class="centerbig">
<a class="taitaitai big" href="http://hackergrousrlpprsc.blogspot.com/"><span style="font-size: large;">DEMO<span class="details"><span class="dlicon"><i class="fa fa-file-archive-o"></i></span>.zip<span class="size">3.3 GB</span></span></span></a></div>

Chèn xong nhớ thay đổi các thông số cho phù hợp...

Có thể bạn quan tâm:
- Css3 nút download đẹp và mượt cho blogger

Chúc các bạn thành công! Nhớ like và share để ủng hộ website nhé!

Mã bài viết: 654rtu4rtu
Người viết: Hacker GSP