Home
blogger

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 !