コピペで使える CSSで作る動きのあるボタン transition
｜
目次
transitionプロパティを使って動きを表現するボタン例です。
細かいtransitionプロパティの使い方はどこかでかけたら書きます。
こちらも対応ブラウザは下記サイトで確認するといいです。
http://caniuse.com/#search=transition
値はそれぞれ、「変化させるプロパティ」、「変化にかける時間」、「イージング」、「変化が始まるまで遅延時間」
書き方は
transition: 「変化させるプロパティ」「変化にかける時間」「イージング」「変化が始まるまで遅延時間」
例だと
#huge {
transition: width 5s ease-in 0.5s;
}
「変化させるプロパティ」
プロパティを複数指定したいときはカンマ区切りで指定します。
すべて指定したい場合はallとします。初期値はallです。
※マウスオーバー前と後で値を変えておかないとアニメーションになりませんので注意してください。
「変化にかける時間」
5秒なら5s、500ミリ秒なら500msになります。初期値は0(0だと変化なしです）です。
「イージング」
ease（開始と終了が滑らか、初期値）
linear（一定）
ease-in（ゆっくり始まる）
ease-out（ゆっくり終わる）
ease-in-out（ゆっくり始まってゆっくり終わる）
スポンサードリンク
左右に開くようなボタン
HTML
<div align="center"> <a class="buttonLR" href="#">左右に開くボタン</a> </div>
CSS
.buttonLR {
display: inline-block;/* ここから共通*/
width: 250px;
height: 60px;
text-align: center;
text-decoration: none;
line-height: 60px;
outline: none;/* ここまで共通*/
position: relative;
z-index: 2;
background-color: #b90b0b;
border: 2px solid #b90b0b;
color: #fff;
}
.buttonLR::before,
.buttonLR::after {
position: absolute;/* ここから共通*/
z-index: -1;
display: block;
content: '';/* ここまで共通*/
top: 0;
width: 50%;
height: 100%;
background-color: #b90b0b;
}
.buttonLR,
.buttonLR::before,
.buttonLR::after {
-webkit-box-sizing: border-box;/* ここから共通*/
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s;
transition: all 0.5s;/* ここまで共通*/
}
.buttonLR:hover {
background-color: #fff;
border-color: #fb9935;
color: #fb9935;
}
.buttonLR::before {
right: 0;
}
.buttonLR::after {
left: 0;
}
.buttonLR:hover::before,
.buttonLR:hover::after {
width: 0;
background-color: #fb9935;
}
結果
上下に開くようなボタン
HTML
<div align="center"> <a class="buttonUD" href="#">上下に開くボタン</a> </div>
CSS
.buttonUD {
display: inline-block;/* ここから共通*/
width: 250px;
height: 60px;
text-align: center;
text-decoration: none;
line-height: 60px;
outline: none;/* ここまで共通*/
position: relative;
z-index: 2;
background-color: #b90b0b;
border: 2px solid #b90b0b;
color: #fff;
}
.buttonUD::before,
.buttonUD::after {
position: absolute;/* ここから共通*/
z-index: -1;
display: block;
content: '';/* ここまで共通*/
left: 0;
width: 100%;
height: 50%;
background-color: #b90b0b;
}
.buttonUD,
.buttonUD::before,
.buttonUD::after {
-webkit-box-sizing: border-box;/* ここから共通*/
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.5s;
transition: all 0.5s;/* ここまで共通*/
}
.buttonUD:hover {
background-color: #fff;
border-color: #fb9935;
color: #fb9935;
}
.buttonUD::before {
top: 0;
}
.buttonUD::after {
bottom: 0;
}
.buttonUD:hover::before,
.buttonUD:hover::after {
height: 0;
background-color: #fb9935;
}
結果
スポンサードリンク
コメントを書き込む