問題 × 解決策

ボタンのロールオーバー時に、なめらかに変化させるには?

問題

ボタンのロールオーバー時に、なめらかに変化させるには?

解決策

cssで「transition-duration」を設定する

 

はじめに

ボタンをロールオーバーした時に、パッと変化するより、なめらかに変化させたいと思うことがありますよね。そんな時に使えるCSSの設定をご紹介します。

まず、マークアップから行います。

pタグにクラスを設定しておき、aタグにCSSを設定します。
便宜上、ここではpタグに「btn-ex」というクラスを設定しています。

<p class="btn-ex">
<a href=“#”>ボタン</a>
</p>

CSSの構築

ボタンのCSS設定

aタグに対し、「transition-duration」を設定します。

.btn-ex a{
	display: inline-block;
	padding: 5px 15px;
	color: #F15A24;
	font-weight: bold;
	background-color: #ffffff;
	border: 1px solid #F15A24;
	transition-duration: 0.3s;
}

ボタンのロールオーバー時のCSS設定

次にボタンのロールオーバー時のCSSの設定を行っていきます。
背景色をオレンジにして、白抜きにします。

.btn-ex a:hover{
	color: #ffffff; 
	background-color: #F15A24;
}

DEMOはこちら

ボタン

コメント

コメントを残す

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

6 + 19 =

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

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