及川WEB室|ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > マウスオーバーで徐々に色とサイズが変わるボタン

マウスオーバーで徐々に色とサイズが変わるボタン

2014/06/28
CSSだけで動きを付けられる。
「transition」プロパティを使用する。
ボタンの色とサイズを徐々に変化させてみる。
サンプルcss-transition CSS
a.button_tra {
background-color:#F0FE9E;width:150px;height:30px;
display:block;text-align:center;line-height:30px;
-moz-transition: background-color 0.4s ease, width 0.4s linear 0 , height 0.4s linear 0;
-webkit-transition: background-color 0.4s ease, width 0.4s linear 0 , height 0.4s linear 0;
-o-transition: background-color 0.4s ease, width 0.4s linear 0 , height 0.4s linear 0;
-ms-transition: background-color 0.4s ease, width 0.4s linear 0 , height 0.4s linear 0;
transition: background-color 0.4s ease, width 0.4s ease, height 0.4s ease;
}
a.button_tra:hover {
background-color:#EFEFEF; width:200px; height:50px;
}
※色とサイズは上記の3行目と11行目を適宜書き換えてください。

HTML
css-transition
MENU Ξ