file type 〜 のボタンをマウスオーバーさせると拡大するアニメーション

0
256


ファイルをアップロードするときに仕様するコード<file type>。この部分をマウスオーバーさせた時に拡大するアニメーションをCSSだけでカンタンに実装できる方法をご紹介します。
まずは標準のコード
<input type=”file” />だとこのようになります。

続いてこのCSSを加えるとマウスオーバーさせた時にグッと拡大するアニメーションが付与されます。
<style type=”text/css”>
#upload:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
}
#upload{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
</style>

#upload:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
}
#upload{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type=”file”] {
-webkit-appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}

大きさやスピードを変化させたい時は(scale)と(all ~ s)の値を変えます。
ボタンが拡大されることでちょっとした面白さが生まれますね。

HTML5+CSS3の新しい教科書

コメントを書く

必須項目をご入力ください
必須項目をご入力ください