The example below adds a tag to the bottom of the page. The CSS code is the following:
/* Powered by - CSS tag */ .powered-by { margin: 0; padding: 0; position: absolute; right: 40px; bottom: 10px; list-style: none; } /* the link */ .powered-by a { float: left; height: 24px; line-height: 24px; position: relative; font-size: 11px; margin-left: 20px; padding: 0 10px 0 12px; background: #0089e0; color: #fff; text-decoration: none; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } /* The < */ .powered-by a:before { content: ""; float: left; position: absolute; top: 0; left: -12px; width: 0; height: 0; border-color: transparent #0089e0 transparent transparent; border-style: solid; border-width: 12px 12px 12px 0; } /* The * */ .powered-by a:after { content: ""; position: absolute; top: 10px; left: 0; float: left; width: 4px; height: 4px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #fff; -moz-box-shadow: -1px -1px 2px #004977; -webkit-box-shadow: -1px -1px 2px #004977; box-shadow: -1px -1px 2px #004977; } /* Link specifics */ .powered-by a:hover { background: #555; } .powered-by a:hover:before { border-color: transparent #555 transparent transparent; }
Add the following in the HTML code:
<div class="powered-by"> <a href="#" target="_blank">I am the powered-by tag</a> </div>