こんにちは。制作部の2児の父、近藤です。

最近HTMLを勉強し始めた新卒2年目の子に、
「簡単にできる、ちょっとカッコいいマウスオーバー表現ってありますか？」と相談されたので、
3分くらいで試せるエフェクトをご紹介したいと思います。

早速ですが、以下、完成例。

最近良く見かける、ボーダーがアニメーションするエフェクトです。

埋め込み方

以下まるっとコピペして調整してみてください。

HTML

調整箇所：

• ラベルのテキスト：BUY ME A BEER! のテキストを変更。
• ラベルの位置： の x="75" y="40" の値を変更。xが縦位置、yが横位置です。

CSS

調整箇所：

• ラベルの色：a.btnBorderEffect text の、fill:#000を変更。
• ラベルのフォントサイズ：同じく、font-size:32px;を変更。
• ボーダーの色：stroke:#000; の値を変更。
• ボーダーの太さ：stroke-width:10; の値を変更。
• アニメーションのスピード：transition:all 0.4s;　の0.4、を変更（ちなみにs、はsecondsの略）。

以上の設定で、簡単にボタンが設定できるかと思います。

エフェクトの解説として

SVGのボーダーはCSSで、「破線」「オフセット（描画開始位置）」などをコントロールできます。
今回のエフェクトは、このボーダーをアニメーションさせることで実装させています。

破線

破線は、繰り返す幅をスペース区切りの配列で指定して表現します。

値1、だけだと、その間隔で繰り返します。

例）値1、のみ。 stroke-dasharray:10;

例）値2、も設定したもの stroke-dasharray:50 10;

オフセット

オフセットは、以下で値を設定するだけです。

例）stroke-dashoffset:50; stroke-dasharray:100;

こんな風に、影で努力してくれているのが、stroke-dashoffsetです。

あとは、この引っ張る力とかを、CSSのアニメーションでコントロールしてあげるだけ。
transitionだけでなく、animateとkeyframe組み合わせても、面白い表現色々できますね。

はなはだ簡単ではございますが、以上、エフェクトの解説でした。

おまけ

ボーダーを使ったボタンなどの表現、とても素晴らしい先例が多くなってます。
awwwardsのsite of the day とかでもかなり多いですね・・。
http://www.awwwards.com/awards-of-the-day
※2014/8/1現在

表現としては控えめなのに、
空間にしっかりコンテンツ領域を示せる良い表現だと思っています。

ちょっとしたアクセントに使うのには、とても面白いと思いました。

ぜひ、試してみてください。