問題 × 解決策

cssでフォームの送信ボタンをカスタマイズする方法

問題

cssでフォームの送信ボタンをカスタマイズするには?

解決策

cssでデフォルトの設定である「border」と「background-color」を上書きします。

 

フォームの送信ボタンのデフォルトのcssをカスタマイズ

フォームの送信ボタンをデフォルトの装飾ではなく、独自にカスタマイズするために、cssでフォームの送信ボタンをカスタマイズする方法をご紹介します。

DEMOはこちら

カスタマイズ前

カスタマイズ後

HTMLはこちら

フォームのボタンをクラス「formbottom」で囲い、各ボタンにクラス「btn」を設定します。

<form>
<p class="formbottom">
<input type="submit" value="送信" class="btns submit">
<input type="reset" value="リセット" class="btns reset">
</p>
</form>

CSSはこちら

フォームのボタンに対して、「border」と「background-color」を設定して、デフォルトのcssの設定を上書きします。

form .formbottom {
	text-align: center;
} 
form .btns{
	display: inline-block;
	vertical-align: middle;
	margin: 0 10px;
	padding: 6px 25px;
	color: #F15A24;
	font-weight: bold;
	letter-spacing: 0.5pt;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #F15A24;
	cursor: pointer;
	transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
} 
form .btns:hover{
    color: #ffffff;
    background-color: #F15A24;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − two =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧