External Link
Notifies users if the link will lead to another site
Sample_external_linkSample_link_alt
Blog Post HTML Code:
<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:
ButtonBlog Post HTML Code:
<a class='button ln' href='url_is_here'>Title_link</a>
With icons Button:
Download DemoBlog Post HTML Code:
<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:
Blog Post HTML Code:
<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:
Blog Post HTML Code:
<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.
Blog Post HTML Code:
<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:
Blog Post HTML Code:
<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.
Music_Wallpaper.png
Music
3.05MB
1920×1080
.png
Blog Post HTML Code:
<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>