<style type="text/css">
.buttons {
margin:0 0 1em 0; padding:0;
clear:both;
height:100%;
overflow:hidden;
}
.buttons * {
font-family:verdana,sans-serif;
}
.buttons a,
button { /* 通常時 */
float:left;
display:block;
margin:0 7px 0 0; padding:5px 10px 6px 7px;
background-color:#f5f5f5;
border-width:1px;
border-style:solid;
border-color:#eee #dedede #dedede #eee;
cursor:pointer;
color:#333;
font-size:100%;
font-weight:bold;
line-height:130%;
text-decoration:none;
}
button {
overflow:visible;
width:auto;
padding:4px 10px 3px 7px;
font-weight:bold;
}
button[type] {
width:auto;
padding:5px 10px 5px 7px;
line-height:17px;
}
*:first-child+html button[type] {
padding:4px 10px 3px 7px;
}
button img,
.buttons a img { /* アイコン画像 */
width:16px; height:16px;
margin:0 3px -3px 0 !important; padding:0 !important;
border:none !important;
}
button:hover,
.buttons a:hover { /* マウスオーバー時 */
border:1px solid #c2e1ef;
color:#336699;
background-color:#dff4ff;
}
.buttons a:active { /* アクティブ時 */
border:1px solid #6299c5;
color:#fff;
background-color:#6299c5;
}
button.positive,
.buttons a.positive { /* 色テーマ positive */
color:#529214;
}
.buttons a.positive:hover,
button.positive:hover {
color:#529214;
border:1px solid #c6d880;
background-color:#e6efc2;
}
.buttons a.positive:active {
border:1px solid #529214;
color:#fff;
background-color:#529214;
}
.buttons a.negative,
button.negative { /* 色テーマ nagative */
color:#d12f19;
}
.buttons a.negative:hover,
button.negative:hover {
border:1px solid #fbc2c4;
color:#d12f19;
background:#fbe3e4;
}
.buttons a.negative:active {
border:1px solid #d12f19;
color:#fff;
background-color:#d12f19;
}
</style>
<div class="buttons">
<!-- button要素 -->
<p>
<button type="submit" class="positive"><img src="/content/img/icon/color/action_check.gif" alt=""/> Save</button>
<button type="submit"><img src="/content/img/icon/color/login.gif" alt=""/> Change Password</button>
<button type="submit" class="negative"><img src="/content/img/icon/color/action_delete.gif" alt=""/> Cancel</button>
</p>
</div>
<div class="buttons">
<!-- a要素 -->
<p>
<a href="#" class="positive"><img src="/content/img/icon/color/action_check.gif" alt=""/> Save</a>
<a href="#"><img src="/content/img/icon/color/login.gif" alt=""/> Change Password</a>
<a href="#" class="negative"><img src="/content/img/icon/color/action_delete.gif" alt=""/> Cancel</a>
</p>
</div>
Save
Change Password
Cancel