丸角、影、グラデーション [ CSS / jQuery ]

下のリンクに、角が丸くなって、影がついて、中にグラデーションがかかっていれば成功。

Show source

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){

var rparam = "5px";
var bparam = "5px 5px 5px #888";
var dparam = {
    "-moz-border-radius": rparam,
    "-webkit-border-radius": rparam,
    "border-radius": rparam,
    "-moz-box-shadow": bparam,
    "-webkit-box-shadow": bparam,
    "box-shadow": bparam,


    "margin": "4px",
    "padding": "4px",
    "border": "1px solid #888888"
};

$("#show-button")
    .css(dparam)
    .css("background", "-webkit-linear-gradient(top, #a2d93f 0%, #73a220 95%)")
    .css("background", "-moz-linear-gradient(top, #a2d93f 0%, #73a220 95%)")
    .css("background",  "linear-gradient(top, #a2d93f 0%, #73a220 95%)")
    .click(function(){
      if ($(this).text() == "Show source") {
         $("#source-rsg").show("fast");
         $(this).text("Hide source");
         return;
      }
      $("#source-rsg").hide("fast");
      $(this).text("Show source");
        
    })
;

});
//-->
</script>

<p>下のリンクに、角が丸くなって、影がついて、中にグラデーションがかかっていれば成功。</p>
<div style="margin-bottom:1em;margin-left:2em;"><a href="javascript:void(0);" id="show-button">Show source</a></div>
<div id="source-rsg" style="display:none;margin-left:2em;border:1px outset #cccccc;padding:5px;">
</div>

意図しているのはこんなボタン表示

スタイルシートとHTMLを分けて書くのはメンドクサイけど、スクリプトで書くのは苦にならない、という個人的な事情により全てjavascriptから設定しています。ホントはスタイルシートに記述しておくのが行儀のいい記法らしいけど、メンドクサイのよ。。