SysChat - Save On Download Times For You Website - Draw A Button Using The Latest HTML5 & CSS3

Save on download times for your website, blog and Facebook page posts (You can use currently available HTML apps for your facebook page)

Below is a relatively tidy button rendered through your browser using only HTML (no images).

My Opinion On The Latest HTML5 & CSS Techniques: Drawing A Button HTML5 and CSS3 - No Images Used

If you consider how many buttons and menus you may need to use for your web page, it can all add up to a lot of bandwidth savings.

Here's the HTML:

HTML Code:

<div id="hLight" style="border-radius: 3px; box-shadow: 0px 0px 3px 2px #a3a3a3 inset; height: 52px; position: absolute; left:116px; top: 82px; width: 101px; z-index: 12;">
 <div class="style3" height="50%" id="buttonHLTxt" style="font-size: 16px; font-weight: bold; left: 28px; position: absolute; top: 15px; z-index: 15;" width="20px">
 <div align="left">
 <a href="http://www.w3schools.com/html5/default.asp" style="color: black;" target="_blank">HTML</a>
 
 </div>
 </div>
 </div>
 
 <div id="button highlight" style="background-color: red; border: 2px solid #000000; box-shadow: 0px 0px 3px 3px #333333; height: 50px; left: 115px; position: absolute; top: 81px; width: 99px; z-index: 11;">
 
 <canvas height="50" id="buttonHL" style="-moz-opacity: 0.5; filter: alpha(opacity=75); opacity: 0.8; position: absolute; top: 0px;left: -1px;" width="100"></canvas></div>
 
 <script type="text/javascript">
 <!--button highlight-->
 

var b=document.getElementById("buttonHL");
 

var btx=b.getContext("2d");
 

var brd=btx.createLinearGradient(0,0,0,40);
 

brd.addColorStop(0,"#000000");
 

brd.addColorStop(1,"#FFFFFF");
 

btx.fillStyle=brd;
 

btx.fillRect(00,00,100,50);
 </script></div>
 </div>

This button has been drawn using the HTML5 gradient fill method. Unfortunately, there seems to be no support as yet, for rounding corners of the canvas.
So, I have used another div and applied an inset box-shadow to make it look like the corners are rounded.
However, there is some support for rounding the canvas corners when using the SVG gradient method.
This will be my next post.

For a more detailed look go to www.blueflux.eu/HTML5.html