Set style for submit hover: text decoration : button « Form « HTML / CSS






Set style for submit hover: text decoration

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

.submit:hover {
  text-decoration: underline;
}

</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
    
    <p>This is a test.</p>
    
      <p>Please fill out our form below in order to contact me. </p>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>


        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send &raquo;" class="submit" />
      </form>
      
     <p>Note: Due to our busy schedules, we cannot answer every message.</p>
    
    </div>
  </div>
  <div id="extra">
    <h2>header</h2>
    <p>This is a text</p>
  </div>
  <div id="footer">
    <p>All rights reserved except where noted.</p>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.'button' Example
2.Form button with label
3.Buttons using the button element
4.input types "submit" and "reset" insert buttons for submitting and clearing the form's contents
5.Define class for input button control
6.Set submit button style for input
7.Style for reset button
8.Style for button submit
9.Hide submit button
10.Set style for submit button: border, background color, padding, margin and width
11.Set margin and width for submit button
12.Set text-transform: uppercase for button
13.Change form button style
14.button font: bold 12px Arial, Sans-serif;
15.button height: 24px;
16.button color: #333;
17.button background: #e7e6e6 url(MarketPlace-images/button.jpg) repeat-x;
18.button border: 1px solid #dadada;
19.button margin: 0;
20.button font: bold 1em Arial, Sans-serif;
21.button border: 1px solid #EFEFEF;
22.button padding: 2px 3px;
23.button background: #F1F0E4;
24.Button border-bottom: 1px solid #d8d8d8;
25.Button border-left: 4px solid #ccc;
26.Button border-right: 1px solid #d8d8d8;
27.Button border-top: 1px solid #d8d8d8;
28.Button color: #505050;
29.Button font-weight: 700;
30.Button margin: 0 0 15px;
31.Button padding: 7px 7px 7px 11px;
32.Button width: 120px;
33.Button background-image: url(images/button.gif);
34.Button background-position: top left;
35.Button background-repeat: no-repeat;
36.Button background-color: #FFFFFF;
37.Button width: 128px;
38.Button border: 0px;
39.Button margin: 7px 0 5px 7px;
40.Button padding: 3px 0 6px 0;
41.Button cursor: hand;
42.Button cursor: pointer;
43.Button color: #2C2C2C;
44.Button font-family: Tahoma;
45.Button font-size: 11px;
46.Button width: 103px;
47.Button padding: 0px;
48.Button background: none;
49.Button float: left;
50.Button margin: 10px 0 0 70px;
51.Button display: inline
52.button { line-height: 2; vertical-align: top; }