At the request of some of you, today I will share the download button that displays file information that TrickPk often uses.
Share code download button to display file information
This button is installed by default in the Median UI template , I took it out and tweaked it a bit and of course now any template can be used. Let's see now!
Instructions for it's installation and usage as below.
First of all Copy the entire CSS below.
Insert the entire code just copied and paste it before the </body> tag.
How to use → copy the code below, edit the information and insert it at the position to be displayed.
/* Download Button CSS Codes by TrickPk */ <style type='text/css'> .trickpk-icon{flex-shrink:0;display:inline-block;margin-right:12px;width:18px;height:18px;background-size:cover;background-repeat:no-repeat;background-position:center}.trickpk-icon.trickpk-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>")}.trickpk-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}.trickpk-downloadInfo a,.trickpk-downloadInfo .trickpk-fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:10px;background:#f1f1f0;border-radius:10px}.trickpk-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}.trickpk-downloadInfo a:after{content:attr(aria-label)}.trickpk-downloadInfo .trickpk-fileType:before{content:attr(data-text)}.trickpk-downloadInfo .trickpk-fileName{flex-grow:1;width:calc(100% - 150px);padding:0 15px}.trickpk-downloadInfo .trickpk-fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trickpk-downloadInfo .trickpk-fileSize{line-height:1.4em;font-size:12px;opacity:.8}.darkMode .trickpk-downloadInfo{background-color:#2d2d30;border:0}.darkMode .trickpk-downloadInfo .trickpk-fileType{background-color:#1e1e1e}@media screen and (max-width:480px){.trickpk-downloadInfo{padding:12px}.trickpk-downloadInfo a{width:50px;height:50px;border-radius:10px}.trickpk-downloadInfo a:after{display:none}.trickpk-downloadInfo a .trickpk-icon{margin:0}} </style>
<div class='trickpk-downloadInfo'> <span class='trickpk-fileType' data-text='zip'></span> <div class='trickpk-fileName'> <span>trickpk.zip</span> <span class='trickpk-fileSize'>1000GB</span> </div> <a aria-label='Download' href='#link'><i class='trickpk-icon trickpk-download'></i></a> </div>
Outcomes:
Above is the entire code and instructions for using the download button to display file information. If you have any questions or complaints about copyright, please comment below to let me know. Wishing you a very productive day of study and work. Good bye and see you again!
Copyright © TrickPk