イベントと CSS を使用して、さまざまな状態でボタンの色を変更する_html/css_WEB-ITnose

対象効果:

フォームのグループ送信ボタンは、マウスホバー中は濃い青、マウスが離れると水色になります。

HTML コード:

onmouseover="this.className='input_move'" onmouseout="this.className='input_out'" type="submit "tabindex =" 6 "＆gt;グループPost＆lt;/button＆gt;実線 #44b549;
border-bottom: 1px 実線 #44b549; border-left: 1px 実線 #44b549; 幅:1 00px;

高さ:30pt;

font-size:15pt; border-radius: 3em;背景-画像: 線形グラデーション(下へ, #44b549 0px, #44b549 100%);

-moz-border-radius: 5px;

}
この段落は初期スタイルを定義する必要があることに注意してください。ページを開いたときのボタンの位置。この段落がないと、ページを開いたときにマウスをホバーするまでボタンにスタイルが表示されません。





.input_move{
color:#ffffff;
バックグラウンド:#006600;
padding-top:3px;
border-top: 1px ソリッド #006600;
border- right: 1px ソリッド #006600;
border -bottom: 1px ソリッド #006600;
ボーダー左: 1px ソリッド #006600; 幅:100px; 高さ:30pt;
font-size:15pt;

ボーダー半径: 3em;

背景画像: リニア -グラデーション(下へ、#006600 0px、#006600 100%);

-moz-Border-Radius: 5px;

color: #ffffff;
padding-t OP: 3px; p border-top: 1px ソリッド #44b549;
border-right: 1px ソリッド #44b549;
border-bottom: 1px ソリッド #44b549;
border-left: 1px ソリッド #44b549;
width:100px;
he ight:30pt ;
font-size:15pt;
border-radius: 3em;
background-image: Linear-gradient(下へ、#44b549 0px、#44b549 100%);
-moz-border-radius: 5px;
}