下のリンクに、角が丸くなって、影がついて、中にグラデーションがかかっていれば成功。
<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>
<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から設定しています。ホントはスタイルシートに記述しておくのが行儀のいい記法らしいけど、メンドクサイのよ。。
