Кнопка посредством SVG

Кнопка в данном примере создана с помощью двух прямоугольников (rect) и градиента (linearGradient). Первый прямоугольник нужен ради темного окаймления, которое просматривается через полупрозрачный второй прямоугольник на переднем плане. Данное окаймление блекнет при нажатии на кнопку из-за увеличения непрозрачности (fill-opacity) переднего прямоугольника. Разумеется, можно создать и что-нибудь более интересное. Однако данный простой пример достаточно наглядно показывает, как утопить кнопку.

SVG-код:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="230" height="75"
   xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Кнопка</title>
<style>
<![CDATA[
	text {font-size:16px;
            font-weight:bold;
            font-family:Arial
      }
]]>
</style>
<script type="text/javascript">
<![CDATA[
function down(){ // нажатие
var x=document.getElementById('btn');
x.setAttribute("stroke-width","2px");
x.setAttribute("fill-opacity","0.9");
x.setAttribute("fill","#0090f0");


x=document.getElementById('shadow');
x.setAttribute("stroke-width","0");
}

function up(){ // отпускание
var x=document.getElementById('btn');
x.setAttribute("stroke-width","0px");
x.setAttribute("fill-opacity","0.8");
x.setAttribute("fill","url(#Grad)");

x=document.getElementById('shadow');
x.setAttribute("stroke-width","4");
}

]]>
</script>
<defs>
    <linearGradient id="Grad"
         x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0" style="stop-color:#b7ddf8"/>
	 <stop offset="100%" style="stop-color:#0090f0"/>
    </linearGradient>
</defs>

<desc>Кнопка</desc>
<g  onclick="alert('Да-да!')">
  <desc>Тень</desc>
  <rect id="shadow" x="22" y="12" width="195" height="55"
     rx="8" ry="8"
     stroke="#c0c0c0" stroke-width="4" fill="#ffffff"/>
  <desc>Передний план</desc>
  <rect id="btn" x="20" y="10" width="200" height="60"
     rx="10" ry="10"
     fill="url(#Grad)" stroke="#909090" stroke-width="0"
     fill-opacity="0.8"
     onmousedown="down()" onmouseup="up()"/>
  <text x="110" y="43" fill="#ffffff" >
    OK
  </text>
</g>  
</svg>