ボタンをクリックすると，jsを実行して，htmlに文字を入れるサンプルです
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test4</title>
<link rel="stylesheet" type="text/css" href="test4.css" />
</head>
<body>
<button type=button onclick="showtest1()">
１つめのボタン
</button>
<div id="1st"></div>
<button type=button onclick="showtest2()">
２つめのボタン
</button>
<div id="2nd"></div>
<script type="text/javascript">
function showtest1(){
var mytxt = "test1";
document.getElementById("1st").innerHTML = mytxt;
}
function showtest2(){
var mytxt2 = '<a href="http://nantoka.filmm.info/blog/">ひみつのページへ</a>';
document.getElementById("2nd").innerHTML = mytxt2;
}
</script>
</body>
</html>
このボタンはcssでデザインしています
@charset "UTF-8";
body {
background-color: #fff799;
}
button{
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
/* ボタンの影の指定
* 影の横幅を2px
* 縦長を2px
* ぼかしを3px
* 広がりを1px
* 色を#666（グレー）に指定 */
box-shadow: 2px 2px 3px 1px #666;
-moz-box-shadow: 2px 2px 3px 1px #666;
-webkit-box-shadow: 2px 2px 3px 1px #666;
/* テキストの影の指定
* 影の横幅を1px
* 縦長を1px
* ぼかしを2px
* 色を#000（黒）に指定 */
text-shadow: 1px 1px 2px #000;
/* グラデーションの指定 */
background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
}
button:hover {
/* 透明度を20%に指定 */
opacity: 0.8;
}
div {
background-color:#ddeeff;
margin:20px;
padding:5px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0px 0px 0px 6px #aedaf2;
-moz-box-shadow:0px 0px 0px 6px #aedaf2;
-webkit-box-shadow:0px 0px 0px 6px #aedaf2;
}
/* CSS Document */
実際の動作の様子