Button CSS, SVG or Canvas, which format to choose?

Basic examples of creating new form objects for the HTML 5 extension.

To create new form objects, three paths also appear to get an idea of ​ ​ their advantages and disadvantages, comparable to creating a simple customizable button in each format.

CSS button 3

Blue

These buttons are based on standard HTML tags, <button> for the first two, <input> for the latter, and are configured using a stylesheet. HTML tags can be combined to create more complex objects, such as, for example, an abortion list.

These CSS buttons are compatible with modern browsers.

<![if gte IE 9]> 
<link href="button.css" rel="stylesheet" type="text/css" />
<![endif]>

SVG or Canvas objects do not offer this feature, you will have to resort to alternative plugins or frameworks for old browsers.

SVG button

SVG button

The SVG button allows you to visually detect style effects from software like Inkscape. Unfortunately, the rendering may differ depending on the browsers (the button is ugly under Chrome).

This demonstration is primarily to see how a user can interact with an SVG object. This format allows you to extend HTML 5 with new, more complex objects, allowing you to interact with specific parts of this object. It is enough to associate event handlers with the tag, as you did in this example.

Button Canvas

The third possibility is the use of Canvas. Getting compatible rendering is easier than in SVG, but creating interactive composite objects will be as difficult as creating a game. This format is suitable for creating new objects with little user interaction, such as clocks.

Output: Select the appropriate format for each use

When creating an SVG or Canvas object, it is difficult to write code that is compatible with all browsers, each of which has an interpretation when implementing these formats. Therefore, the main part of the work is to solve compatibility problems, which is a waste of time if you do not find widgets ready for use.
It is advisable to use:

Source codes

CSS

HTML code for CSS buttons:

<div class="buttonbar">  		
    <button class="button red">Red button</button></li>
    <button class="button blue">Blue button</button>
    <input type="button" value="Gray input" class="button gray">
</div>

CSS ID:

.button, .button:visited 
{
  color: #fff; 
  text-decoration: none;
  border-radius: 6px;  
  box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.6);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  border-right: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  font-family:Calibri, Arial;
  margin-left:4px;
  font-size: 16px; 
  padding: 1px 8px 3px 8px; 
}
.button:active
{
  top: 1px;
  left:1px; 
}
.gray.button, .gray.button:visited
{
  background-color:#CCCCCC;
  box-shadow: inset 1px 1px 2px 0 rgba(255,255,255,0.6), 
  inset -1px -1px 1px 0 rgba(100,120,140,0.6),
   1px 2px 4px 0 rgba(0,0,0,0.6);
  color:#333; 
  border-left:1px solid #999; 
  border-top:1px solid #999; 
  text-shadow:none;	
}
.gray.button:hover
{
  background-color:#999;
  color:#111;
}

Full CSS code. For cyan and red buttons, only the color properties change.

SVG

SVG ID:

<svg width="132" height="36"  id="svg1"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs
     id="defs4">
    <linearGradient id="gradient1">
      <stop id="stop1" style="stop-color:#eee;stop-opacity:1;" offset="0" />
      <stop id="stop2" style="stop-color:#aaa;stop-opacity:0;" offset="1" />
    </linearGradient>
    <linearGradient xlink:href="#gradient1" id="gradient2"
       x1="0" y1="28" x2="0" y2="1"
       gradientUnits="userSpaceOnUse" />
	 <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="144" height="38">
          <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
          <feOffset in="blur-out"  dx="2" dy="2"/> 
          <feBlend in="SourceGraphic"  mode="normal"/>   
  </defs>
  <g id="" class="buttonbar"  onmousedown="svgDown()" onmouseover="svgOver()"
 onmouseout="svgOut()" onmouseup="svgUp()">
  <rect id="svgbutton" x="0" y="0" rx="8" ry="6" width="122" height="28"
	 stroke="#000066"  
	 style="fill:url(#gradient2);fill-rule:evenodd;stroke:#000000;
     stroke-width:1px;stroke-linecap:butt;
     stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
	 filter="url(#drop-shadow)"
	 />
  <text x="28" y="18" fill="black"
    font-family="Calibri, Arial" font-size="15" font-weight="500">
    SVG button
  </text>
  <g>
</svg>

JavaScript code associated with SVG code:

function svgOver()
{
  document.getElementById("stop2").setAttribute('style',
    "stop-color:#000;stop-opacity:0;");
}
function svgOut()
{
  document.getElementById("stop2").setAttribute('style',
    "stop-color:#666;stop-opacity:0;");
}
function svgDown()
{
  var button= document.getElementById("svg1");
  button.style.margin="1px 0 0 1px";
  var x = document.getElementById("svgStorage");
  x.innerHTML="Clicked on SVG button";
}
function svgUp()
{
  var button= document.getElementById("svg1");
  button.style.margin="0";	
  var x = document.getElementById("svgStorage");
  x.innerHTML="";	
}

The function is associated with the mouse switching to or from the button, the button being pressed (svgDown) or released (svgUp).

Canvases

Canvas code:

<canvas id="mycanvas" width="128" height="36"
 onmousedown="canvasDown(this)"  onmouseup="canvasUp(this)"
 onmouseover="canvasOver()" onmouseout="canvasOut()">
</canvas>

<script>
canvasOut();
</script>

JavaScript code for drawing a button in Canvas:

function makeButton(x, y, w, h, radius, label, color)
{
  var canvas = document.getElementById("mycanvas"); 
  var context = canvas.getContext("2d");
  // clear background
  context.beginPath();
  context.fillStyle="white";
  context.fillRect(0,0, 126, 36);
  // draw button
  var r = x + w;
  var b = y + h;
  context.moveTo(x+radius, y);
  context.lineTo(r-radius, y);
  context.quadraticCurveTo(r, y, r, y+radius);
  context.lineTo(r, y+h-radius);
  context.quadraticCurveTo(r, b, r-radius, b);
  context.lineTo(x+radius, b);
  context.quadraticCurveTo(x, b, x, b-radius);
  context.lineTo(x, y+radius);
  context.quadraticCurveTo(x, y, x+radius, y);
  // background gradient 
  var backgrad = context.createLinearGradient(1,1,0,30);
  backgrad.addColorStop(0, '#5EF');
  backgrad.addColorStop(0.5, color);
  context.fillStyle = backgrad;
  // drop shadow
  context.shadowBlur = 3;
  context.shadowOffsetX = 2;
  context.shadowOffsetY = 2;
  context.shadowColor = "#669";  
  context.fill();
  // the following lines before stroke are required for Chrome
  context.shadowBlur = 0;  
  context.shadowOffsetX = 0;
  context.shadowOffsetY = 0;
  context.stroke(); 
   // label with shadowing
  context.beginPath();
  context.font = "12pt Calibri,Arial";
  context.fillStyle = "#FFF";
  context.shadowBlur = 0;
  context.shadowOffsetX = -1;
  context.shadowOffsetY = -1;
  context.shadowColor = "#669";  
  context.fillText(label, x+w*0.1, y+h*0.66);
}

Code associated with events:

function canvasUp(button)
{
 button.style.margin="0";		
 document.getElementById("canvasStorage").innerHTML="";
}
function canvasDown(button)
{
 button.style.margin="1px 0 0 1px";	
 document.getElementById("canvasStorage").innerHTML="Clicked on Canvas button";
}
function canvasOver()
{
 makeButton(0,0,120,28,8, "Canvas button", '#19B');     
}
function canvasOut()
{
 makeButton(0,0,120,28,8, "Canvas button", '#2AC');     
}

These are the same events as SVG, but this time you need to completely redraw the button to change colors.

Full JavaScript code.

See also