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

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

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