External Link
Notifies users if the link will lead to another site
Sample_external_link<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a> <a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>
Button Link
ButtonBlog Post HTML Code:
<a class='button' href='url_is_here'>Title_link</a>
Alternative style:
Button<a class='button ln' href='url_is_here'>Title_link</a>
With icons Button:
Download Demo<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a> <a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>
with <svg> icons Button:
<a class='button' href='url_is_here'> <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg> <span>WhatsApp me!</span> </a> <a class='button' href='url_is_here'> <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg> <span>Buy now!</span> </a>
Two button in single line:
<div class='btnF'> <a class='button ln' href='url_is_here'>Demo</a> <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a> </div>
Download Link
To provide downloaded file information to users.
<div class='dlBox'> <!--[ Change data-text='...' atribute to add new file type ]--> <span class='fT' data-text='zip'></span> <div class='fN'> <!--[ File name ]--> <span>file_name.zip</span> <span class='fS'>200kb</span> </div> <!--[ Download link (change href='...' atribute to add link download) ]--> <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a> </div>
With background image instead of text:
<div class='dlBox'> <!--[ Change data-text='...' atribute to add new file type ]--> <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span> <div class='fN'> <!--[ File name ]--> <span>about_me.png</span> <span class='fS'>10kb</span> </div> <!--[ Download link (change href='...' atribute to add link download) ]--> <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a> </div>
Countdown Download Box
This feature will show a countdown before the user downloads any file.
This feature requires direct download link of cloud files. You can use Google Drive to get direct download link of a file.
<div class='dldCo' id='download1'> <div class='dldBx'> <div class='dldTp'> <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'> <svg class='dldSv' viewBox='0 0 34 34'> <circle class='b' cx='17' cy='17' r='15.92' /> <circle class='c dldPg' cx='17' cy='17' r='15.92' /> </svg> </div> <div class='dldIn'> <span data-text='Name'>Music_Wallpaper.png</span> <span data-text='Category'>Music</span> <span data-text='Size'>3.05MB</span> <span data-text='Resolution'>1920×1080</span> <span data-text='Extension'>.png</span> </div> </div> <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button> <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button> </div> <div class='dldSl'> <div class='dldMe'></div> </div> </div>
Simple Box Code
Box Title Here
This is your box content. Here you can add text, links or images.
Box Title Here
<!--[ Box Code style ]-->
<style>
.custom-box{
border: 2px solid #ff6600;
padding: 15px;
border-radius: 8px;
background: none;
margin: 15px 0;
}
.custom-box h3{
margin: 0 0 8px;
color: #ff6600;
}
</style>
<!--[ Box Code ]-->
<div class="custom-box">
<h3>Box Title Here</h3>
<p>This is your box content.here you can add text, links or images.</p>
</div>
Box Code with copy button
<div class="example">
<h1>Hello World</h1>
</div>
<div class="code-box">
<div class="code-header">
<span>HTML Code</span>
<button onclick="copyCode(this)">Copy</button>
</div>
<pre><code>
<div class="example">
<h1>Hello World</h1>
</div>
</code></pre>
</div>
👉 Please Support Us ❤️ Subscribe OUR YouTube Channel 👍
Disclaimer: Shakeel File, Guarantee that the Mobile/Pc Apps, Firmware, Flash Tools, Software or any other files on this page are 100% correct But use "At your own risk".
Also Take a Look at These
Note: I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box or you can Contact Us. Thank you!
