HatenaSampleCode.html

<div class="box">
<p id="res" class="res">まだクリック無し！</p>
<div class="btn-square">
<p id="btn">ボタン</p>
</div>
</div>

<script>// <![CDATA[
var Value = 0;
document.getElementById("btn").onclick = function() {
    var str = Value + '回目のクリック';
    document.getElementById("res").innerHTML = str;
    Value++;
};
// ]]></script>
<style><!--
.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

.res {  
    color: #000000;
}

.box {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: double 4px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}
--></style>