[User Interface] Button CSS3 tanpa Image

Dalam membuat button Submit biasanya ada efect ditekan, hal ini sangat mudah dilakukan dengan CSS. Berikut caranya,

#form .btn, #form .btn:focus, #form .btn:hover {
 background:#f3a626;
 border:1px solid #f3a626;
 color:#371400;
 cursor:pointer;
 display:block;
 font-family:Helvetica, Arial, sans-serif;
 font-size:23px;
 font-weight:bold;
 text-indent:0;
 text-shadow:0 1px 0 #f3a626;
 text-transform:uppercase;
 height:46px;
 width:116px;
 padding:0;
 outline:0;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 -moz-box-shadow:0px 0 2px #000;
 -webkit-box-shadow:0px 0 2px #000;
 box-shadow:0px 0 2px #000;
 background: -moz-linear-gradient(top, #f3a626, #f08519);
 background: -webkit-gradient(linear, left top, left bottom, from(#f3a626), to(#f08519));
}

Kemudian agar button terasa ditekan,

#form .btn:active {
 background:#f08519;
 background: -moz-linear-gradient(top, #f08519, #f3a626);
 background: -webkit-gradient(linear, left top, left bottom, from(#f08519), to(#f3a626));
 position:relative;
 top:1px;
 text-shadow:0 -1px 0 #f3a626;
 -moz-box-shadow:0px 0 1px #666;
 -webkit-box-shadow:0px 0 1px #666;
 box-shadow:0px 0 1px #666;
}

HTML

<form id="form" action="javascript:;">
  <p>
    <textarea cols="50" rows="10"></textarea>
  </p>
  <p>
    <input class="btn" type="submit" value="Reply">
  </p>
</form>

Design in PSD by @kuswanto