ボーダーにエフェクトを追加するコードスニペット8選。CTAボタンや入力フォームなどに！

Webデザインにおけるボーダー（境界線）は、元来そこまで注目を集めるような存在ではありませんでした。

しかしCSSの進化によって、ボーダーも複雑なカラーリングや特殊効果ができるようになってきており、ボーダーエフェクト（ボーダーアニメーション）は最近ではマイクロインタラクションとして注目を浴びています。

今回はCSSとすこしのJavaScriptで実装できる、8種類のボーダーエフェクトをチェックしてみましょう。

1. 魔法のSVGボーダー

SVGはさまざまな画面サイズに対応できる、有能な秘密兵器。

下のボーダーエフェクトはSVGで構成されており、コンテナのサイズと形状にあわせてフレキシブルに対応します。

See the Pen CSS border (using an SVG) by Louis Hoebregts (@Mamboleoo) on CodePen.default

2. ユニークなホバー

CSSトランジションのおもな用途のひとつとして、ボタンの枠となるボーダーの色の変更が挙げられます。

ボーダーの色を変えるだけでもユーザーの注意をひけますが、さらに仕掛けを実装してあげましょう。

下の例ではボーダーにエフェクトを加えた、ユニークなホバーをいくつかご紹介してます。ボタンを目立たせたいときにぴったりです。

See the Pen CSS Border transitions by Giana (@giana) on CodePen.default

3. なめらかなボーダーエフェクト

なめらかなボーダーアニメーションを取り入れたいなら、このスニペットがおすすめ。このスニペットは安っぽさがなく、スタイリッシュなデザインです。

それと同時にユーザーの目をひくアニメ―ションなので、CTAボタンに活用できそうですね。

See the Pen Animated CSS Gradient Border by Mike Schultz (@mike-schultz) on CodePen.default

4. 入力フォームにひと工夫

ボーダーエフェクトの活用におすすめなのが入力フォームです。

下のスニペットでは、入力フォームの背景やラベルにちょっとしたエフェクトが追加されています。ボーダーエフェクトがマイクロインタラクションの機能を果たしていることが伝わるはず。

小さな工夫ですが、入力フォームのUXを大幅に向上させてくれるでしょう。

See the Pen Awesome input focus effects by Takuma.I (@Takumari85) on CodePen.default

5. アニメーション付きのネオン文字

アウトライン化されたテキストは、あらゆるデザインに取り入れられる優れもの。

下の例のようなエフェクトを取り入れれば、目をひくロゴやヘッダーを作れそうですね。

See the Pen CSS-only shimmering neon text by Giana (@giana) on CodePen.default

6. 背景を切り抜く

近年人気を集めている、背景を切り抜いたようなデザイン。以下のコードスニペットは、デザイン要素を透明にして、背景を表示するエフェクトです。

コンテナのボーダーとテキストの両方に、エフェクトが取り入れられています。

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.default

7. エレガントなホバー

プレーンなリンクテキストも、ボーダーエフェクトで装飾すれば現代的なデザインに早変わり。

左上のハンバーガーメニューから、ホバーのパターンを選択してみましょう。テキストベースのナビゲーションに、ちょっとしたひねりを手軽に加えられます。

See the Pen Sass mixin library for text hover by Antonija Šimić (@tonkec) on CodePen.default

8. 手書き風のボーダー

ここまでは、プロフェッショナルな印象を与えるようなデザインのボーダーエフェクトをご紹介してきました。

最後にご紹介するのは、手作り感のあるボーターエフェクトです。

CSSのborder-radiusを活用して線に意図的にゆがみを加えて、ボタンを素朴な印象にしています。

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.default

おわりに

ただのシンプルなボーダーではそこまで注目されません。しかし色や動きを加えるだけで、文字やボタンの印象をガラッと変えられます。

すこしの工夫で文字に魅力を与えられるボーダーエフェクトを、ぜひ使いこなしてみてください。

（執筆：Eric Karkovack　翻訳：Nakajima Asuka　編集：Sansui Riho）