a
Designing Chaturbate Bios - <a>
HTML Links - Hyperlinks
The link is a clickable element, it can be assigned to a text segment, a single word or an image
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<a> |
<a href="...">link</a> |
Defines a hyperlink |
HTML MARKUP
a - as mentioned above it defines a hyperlink, a link, start of a markup code which can be used to navigate inside the same page or outside the current page.
HTML Markup Code:
<a href="https://camgirl.cloud/" target="_blank" title="Camgirl Cloud Website">Camgirl Cloud link</a>
Will render:
Camgirl Cloud link
Code Snippets
Test markup codes and see how your browser is rendering them. Use button to see how to use the source editor and rendering tool
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 using <a> HTML tag
Because Chaturbate doesn't use external CSS, some basic functionality is restricted to inline-css which means hover effects over links or buttons are not working.
Links and how to style them to look more appealing using inline-CSS
1. Basic html for a link with some inline-css
<a href="#" style="color:#036;padding:4px 8px;text-align:center;">Some Text Here</a>
Show: Some Text Here
2. Making a button-like using inline-css
<a href="#" style="color:#036;padding:4px 8px;text-align:center;border:3px double #036;text-decoration:none;">Some Text Here</a>
Show: Some Text Here
3. Making a button-like using inline-css
<a href="#" style="color:#fff;padding:7px 11px;text-align:center;border:3px double #ccc;text-decoration:none;background-color:#222222;-webkit-border-radius:100px;border-radius:100px;">Some Text Here</a>
Show: Some Text Here
4. Making a button-like using inline-css
<a href="#" style="color:#fff;padding:7px 11px;text-align:center;border:1px solid #a86813;text-decoration:none;background-color:#fca430;-webkit-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 2px 4px #999;box-shadow:0 2px 4px #999;font-size:14px;text-transform:uppercase;">Some Text Here</a>
Show: Some Text Here
5. Making a button-like using image element
<a href="#"><img src="image-path/cdcoffee.png"/></a>
Show: 
6. Making a button-like using image element
<a href="#" style="display:block;width:220px;height:auto;margin:3px auto 7px 1px;background-color:#f1f1f1;border:4px solid black;text-align:center;"><img src="image-path/cdcoffee.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>
Show:
7. Making a button-like using image element
<a href="#" style="display:block;width:220px;height:auto;margin:3px auto 7px 1px;background-color:#222;border:1px solid pink;text-align:center;-webkit-box-shadow:0 5px 8px -6px #999;box-shadow:0 5px 8px -6px #999;-webkit-border-radius:6px;border-radius:6px;"><img src="image-path/cdcoffee.png" style="display:block;width:100%;height:auto;margin:0 auto;"/></a>
Show:
Inline-css can be added to:
Editing Tips
Our suggestions for fast editing and viable markup rendering
target="_ ". All links (on page or external URLs) are set up to open on another page (with a countdown) so there's no need to use target="_ "
