問題
ボタンのロールオーバー時に、なめらかに変化させるには?
解決策
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;
}
コメント