cute popup button
by J. Jones
HTML
<input name="send" type="submit" id="send" class="button" value="Send Button">
CSS
#send {
margin: 10px 0 0 0;
width: auto;
display: inline-block;
cursor: pointer;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,0.25);
color: #FFF;
padding: 7px 18px;
text-decoration: none;
font-size: 110%;
font-weight: bold;
text-shadow: 0 -1px 1px rgba(0,0,0,0.6);
background: #73A326; /* old browsers */
background: -moz-linear-gradient(top, #C1D74C 0%, #73A326 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C1D74C), color-stop(100%,#73A326)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C1D74C', endColorstr='#73A326',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #C1D74C 0%,#73A326 100%); /* opera */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -1px 1px rgba(0,0,0,0.5) inset;
-moz-box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -1px 1px rgba(0,0,0,0.5) inset;
box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -1px 1px rgba(0,0,0,0.5) inset;
}
/* HOVER */
#send:hover {
padding-bottom: 9px;
margin: 8px 0 0 0;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -3px 1px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -3px 1px rgba(0,0,0,0.6) inset;
box-shadow: 0 1px 1px rgba(255,255,255,0.4) inset, 0 -3px 1px rgba(0,0,0,0.6) inset;
}
/* ACTIVE + FOCUS */
#send:active,
#send:focus {
padding-bottom: 6px;
margin: 11px 0 0 0;
border: 1px solid #666;
border: 1px solid rgba(0,0,0,0.5);
border-top: 1px solid #000;
background: #73A326;
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset, 0 2px 1px rgba(0,0,0,0.6) inset;
-moz-box-shadow: 0 -1px 0 rgba(255,255,255,0.5) inset, 0 2px 1px rgba(0,0,0,0.6) inset;
box-shadow: 0 -1px 0...