CHAPTER 17 ■ LAYOUTS
Button
HTML
<h1>Button</h1><form id="form1" method="post" action="http://www.tipjar.com/cgi-bin/test">
<input type="text" id="search" name="search" class="search" value="Search" />
<input type="submit" id="submit1" name="submit1" value="Submit" />
<input type="submit" id="submit2" name="submit3" value="" />
<input type="submit" id="submit3" name="submit2" class="button" value="Submit" />
<input type="reset" id="reset1" name="reset1" class="button" value="Reset" />
</form>
<input type="button" id="message" name="message" class="button" value="Message" />
<input type="button" id="submit4" name="submit4" class="button" value="J-Submit"/>
<input type="button" id="reset2" name="reset2" class="button" value="J-Reset" /><button id="change" name="change" class="button">Change Me!</button>
<a id="link" class="button" href="http://cssdesignpatterns.com">Link</a>CSS
form { margin:20px 0; }
.button { margin:0; padding:3px 10px; font-size:1em; color:black;
cursor:pointer; background:url("g1.jpg") repeat-x left bottom;
border-left:1px solid yellow; border-right:1px solid orange;
border-top:1px solid yellow; border-bottom:1px solid orange; }.button:hover, .button.hover
{ background:url("g2.jpg") repeat-x left top;
border-left:1px solid orange; border-right:1px solid yellow;
border-top:1px solid orange; border-bottom:1px solid yellow; }a.button { padding:5px 10px; line-height:2em; text-decoration:none; }#submit2 { width:32px; height:32px; border:none; cursor:pointer;
background:url("go.jpg") no-repeat left top; }
#submit2:hover, #submit2.hover { background-position:1px 1px; }