Posted on

Creating custom HTML tags

Why not have something like facebook login button, which we see on many sites now. This is basically custom tag which facebook has made. In this post we will see how it can be made.

Requires: HTML, Javascript, CSS

Using:

CSS for the custom tag

<style type="text/css">
@media all 
{
IW\:button {
 font-size: 24pt;
 background-color:#999;
 border-top:1px solid #CCC;
 border-left:1px solid #CCC;
 border-right:2px solid black;
 border-bottom:2px solid black;
 border-radius:5px;
 font-family:"Times New Roman", Times, serif;
 cursor:pointer; 
 color:black;
 padding:1px;
 padding-left:2px;
 padding-right:2px;
}
} 
span{
 color:white;
 padding-left:2px;
 padding-right:4px;
 border-right: 2px solid #020;
}
</style>

Javascript for the custom tag

<script type="text/javascript">// <![CDATA[
function ActasMytag(myTag)
{
myTag.style.borderLeft = '1px solid #CCC';
myTag.style.borderTop = '1px solid #CCC';
myTag.style.borderRight = '2px solid black';
myTag.style.borderBottom = '2px solid black';
}

function ActasButton(myTag)
{
myTag.style.borderLeft = '1px solid black';
myTag.style.borderTop = '1px solid black';
myTag.style.borderRight = '2px solid #CCC';
myTag.style.borderBottom = '2px solid #CCC';
}
</script>

HTML to be written for the custom tag

Add ‘IW’ in xmlns of HTML.

<IW:button onmousedown="ActasButton(this)" onmouseup="ActasMytag(this)">IW Custom Button</IW:button>

Explanation:

Lets start with the HTML first.

Adding IW is an not that important. But should be done as browser can ignore the custom tag as it is not known to it.

Look at the html tag we have created. ‘IW’ is tag name we want to create. Notice the specified ‘button’ after ‘:’, it is written because only one custom tag can be inserted in a page but can have any number of attributes. So, to solve that problem we distinguish different tags on the basis of value written after ‘:’. Next we are calling Javascript function to give this tag functionality of a button.

Javascript

Line 2: This function changes the property back to default property we have set for our custom tag. It is called on mouseup.

Line 10: This function simulates the pressing of button. It is called on mousedown.

CSS

Line 2: @media all, what it does is the xmlns IW will work across the page and will apply CSS specified inside it.

Line 4: IW\:button selects the IW tag with attribute button and apply the defined CSS to it.

Note:

  • @media all is important part otherwise CSS may not work.
  • Modern browsers may run without xmlns and @media all.
  • <IW:button> should be there otherwise if IW is only specified, only one custom tag can be used.
  • JS function ActasButton is important because it makes button looks like its pressed on mouse button down.
  • Functionality like redirecting can be given onclick or performing any other action.

You can download the working repository from github.