Chaturbate Demo - Using <a> tag
Some markup codes showing the use of <a> HTML tag
Markup Code Box
Default button, on click, removes the markup code from light-blue box
Render Box
That's how it looks rendered in browser. Optionally you can Save as PDF
Markup Codes
Floating icons
<li style="display:block;width:40px;height:auto;position:fixed;top:166px;left:0px;text-align:center;list-style:none;box-sizing: border-box;text-align:center;z-index:10000;overflow:hidden;float:none;clear:left;"><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #333;"><img src="https://editbio.files.wordpress.com/2016/09/2twt.png" style="width:35px;height:35px;background-color:#900;"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #333;"><img src="https://editbio.files.wordpress.com/2016/09/1ama.png" style="width:35px;height:35px;background-color:#900"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #333;"><img src="https://editbio.files.wordpress.com/2016/09/2insta.png" style="width:35px;height:35px;background-color:#900"></a><a href="#" style="display:block;width:35px;height:35px;border-bottom:1px solid #333;"><img src="https://editbio.files.wordpress.com/2016/09/mv2.png" style="width:35px;height:35px;background-color:#900"></a><a href="#" style="display:block;width:35px;height:300px;background-color:#000"><img src="https://raw.githubusercontent.com/cssmfc/xniteproductions/master/assets/images/buttons/clte_acre_blkanim.gif" style="width:35px;height:300px;"></a></li>
All image elements must be hosted online.
Replace the # between double quotes with your own links
Combo element using image and link (banner)
<a href="#"><img src="your-image-url"></a>
Replace the # between double quotes with your own url
Replace the your-image-url between double quotes with your hosted image URL
Combo element using multiple links (buttons)
<a href="#" style="display:inline-block;width:130px;height:auto;margin:0 auto;text-align:center;text-decoration:none;font-size:15px;background-color:#222;color:#f1f1f1;padding:6px 0 6px;">Click Here</a><a href="#" style="display:inline-block;width:130px;height:auto;margin:0 auto;text-align:center;text-decoration:none;font-size:15px;background-color:#09F;color:#f1f1f1;padding:6px 0 6px;">Click Here</a><a href="#" style="display:inline-block;width:130px;height:auto;margin:0 auto;text-align:center;text-decoration:none;font-size:15px;background-color:#c53c3c;color:#f1f1f1;padding:6px 0 6px;">Click Here</a>
Replace the # between double quotes with your own url
Background color can be changed, font color can be changed
Styles for links
<!-- Style 1 -->
<a href="#" style="text-decoration:none;text-shadow:0 2px 4px #000;color:#fff;">Click Here</a>
<br>
<!-- Style 2 -->
<a href="#" style="text-decoration:none;text-shadow:0 2px 4px #ccc;color:#777;">Click Here</a>
<br>
<!-- Style 3 -->
<a href="#" style="text-decoration:none;text-shadow:0 2px 4px #ccc,0 -4px 4px #ccc,0 -5px 3px #333;color:#c53c3c;">Click Here</a>
<br>
<!-- Style 4 -->
<a href="#" style="text-decoration:underline;color:#c53c3c;">Click Here</a>
<br>
<!-- Style 5 -->
<a href="#" style="text-decoration:underline;color:#036;">Click Here</a>
<br>
<!-- Style 6 -->
<a href="#" style="text-decoration:none;color:green;text-transform:uppercase;">Click Here</a>
<br>
<!-- Style 6 -->
<a href="#" style="text-decoration:none;color:orange;background-color:#000;">Click Here</a>
Replace the # between double quotes with your own url
Add/Edit inline-css