Website đang trong giai đoạn hoàn thiện và chạy thử nghiệm, rất mong nhận được sự đóng góp ý kiến của mọi người để website hoàn thiện tốt hơn! Đóng góp

Table of Content

Share code download button hiển thị thông tin file

download button, code download button đẹp, button download css, nút download hiển thị thông tin file, download button html, button download code, nút

Theo yêu cầu của một số bạn, hôm nay mình sẽ chia sẻ download button hiển thị thông tin file mà Code Pro thường sử dụng.

Share code download button hiển thị thông tin file
Share code download button hiển thị thông tin file

Button này được cài đặt mặc định trong template Median UI, mình đã lấy ra và chỉnh lại chút và tất nhiên bây giờ template nào cũng có thể sử dụng. Cùng xem ngay nào!

codepro.zip 1000GB

Hướng dẫn cài đặt và sử dụng

Bước 1: Copy toà bộ CSS dưới đây


<style type='text/css'>
	.codepro-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.codepro-icon.codepro-download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}.codepro-downloadInfo{max-width:500px;background-color:#fefefe;box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%);border:1px solid #eceff1;border-radius:6px;padding:15px;margin-top:20px;margin-bottom:20px;display:flex;align-items:center;line-height:1.8em;font-size:14px}.codepro-downloadInfo a,.codepro-downloadInfo .codepro-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.codepro-downloadInfo a{background-color:#1e1e1e;color:#fefefe;margin:0;padding:10px 12px;border-radius:3px;width:auto;height:auto;line-height:20px;font-size:13px;text-decoration:none}.codepro-downloadInfo a:after{content:attr(aria-label)}.codepro-downloadInfo .codepro-fileType:before{content:attr(data-text)}.codepro-downloadInfo .codepro-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.codepro-downloadInfo .codepro-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codepro-downloadInfo .codepro-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .codepro-downloadInfo{background-color:#2d2d30;border:0}.darkMode .codepro-downloadInfo .codepro-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.codepro-downloadInfo{padding:12px}.codepro-downloadInfo a{width:50px;height:50px;border-radius:10px}.codepro-downloadInfo a:after{display:none}.codepro-downloadInfo a .codepro-icon{margin:0}}
</style>

Bước 2: Chèn toàn bộ code vừa copy vào trước thẻ </body>

Bước 3: Cách sử dụng → copy code dưới đây, chỉnh sửa thông tin và chèn vào vị trí cần hiển thị.


<div class='codepro-downloadInfo'>
	<span class='codepro-fileType' data-text='zip'></span>
	<div class='codepro-fileName'>
		<span>codepro.zip</span>
		<span class='codepro-fileSize'>1000GB</span>
	</div>
	<a aria-label='Download' href='#link'><i class='codepro-icon codepro-download'></i></a>
</div>

Lời kết

Trên đây là toàn bộ code và hướng dẫn sử dụng download button hiển thị thông tin file. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!

Copyright © Code Pro

Sống hết mình !

17 comments

  1. có cách nào để ẩn link khi đưa chuột lại cái button ko anh :3
    1. cái này là trình duyệt nó đọc mà, chỉ có một cách là không để link :3
  2. Chất luion anh Đức đz
    1. oke em luonn
  3. chất như Code Pro :3
    1. chất mãi thôi :3
  4. Tới công chiện luôn rồi
    1. chiện trò giề :3
  5. Em đang cần cái này nè
    1. ngon luônnn
  6. nhưng mà e thấy 1 số btn bằng js hay sao mà f12 ko thấy thẻ a, đưa chuột lại cũng ko hiện link, chỉ khi click vào nó mới nhảy link ra thôi, kiểu thường thấy trong 1 số link rút gọn
    1. dùng onclick="window.open" tuy nhiên cái này làm ảnh hưởng đến SEO nên ít khi dùng. Có bài này anh dùng này https://www.code.pro.vn/2021/08/share-code-bo-button-voi-21-hieu-ung-hover-tuyet-dep.html
    2. ỏ, để em coi thử
    3. oke iêmmm
    4. oki rồi anh :3 <3
    5. hehe