「CSS」のみで作れる リンクボタンのアイデア
Web Basic Archive
シンプルになりがちなリンクボタンのデザインですが、いつもと違うスタイルを取り入れたい、他のボタンよりも目立たせたいときに使えそうなアイデアを考えてみました。
マウスオンでアニメーションも付けてあります。気になるデザインがありましたら、使っていただけると幸いです。矢印等の位置は、デザインに合わせてカスタマイズしてください。
また、思い付き次第追加していきます。
目次
全タイプ一覧
タイプ一覧はこちらからどうぞ
下記にそれぞれのコードサンプルがあります。
背景色＋矢印各種
シンプル矢印
See the Pen Link button - Simple arrow by web-basic-archive (@web-basic-archive) on CodePen.
矢印二重
See the Pen Link button - Double arrow by web-basic-archive (@web-basic-archive) on CodePen.
アイコン矢印01
See the Pen Link button - Icon arrow01 by web-basic-archive (@web-basic-archive) on CodePen.
アイコン矢印02
See the Pen Link button - Icon arrow02 by web-basic-archive (@web-basic-archive) on CodePen.
三角矢印01
See the Pen Link button - Triangular arrow01 by web-basic-archive (@web-basic-archive) on CodePen.
三角矢印02
See the Pen Link button - Triangular arrow02 by web-basic-archive (@web-basic-archive) on CodePen.
棒長矢印01
See the Pen Link button - Long arrow01 by web-basic-archive (@web-basic-archive) on CodePen.
棒長矢印02
See the Pen Link button - Long arrow02 by web-basic-archive (@web-basic-archive) on CodePen.
ななめ矢印01
See the Pen Link button - Diagonal arrow01 by web-basic-archive (@web-basic-archive) on CodePen.
ななめ矢印02
See the Pen Link button - Diagonal arrow02 by web-basic-archive (@web-basic-archive) on CodePen.
角丸
楕円右のみ
See the Pen Link button - Ellipse by web-basic-archive (@web-basic-archive) on CodePen.
枠線
二重線01
See the Pen Link button - Double border by web-basic-archive (@web-basic-archive) on CodePen.
二重線02
See the Pen Link button - Double border02 by web-basic-archive (@web-basic-archive) on CodePen.
外枠線
See the Pen Link button - Outline by web-basic-archive (@web-basic-archive) on CodePen.
罫線
See the Pen Link button - Ruled line by web-basic-archive (@web-basic-archive) on CodePen.
ワンポイントアクセント
アクセント三角
See the Pen Link button - Accent triangle by web-basic-archive (@web-basic-archive) on CodePen.
アクセントドッグイヤー
See the Pen Link button - Accent dog ear by web-basic-archive (@web-basic-archive) on CodePen.
アクセントライン
See the Pen Link button - Accent line by web-basic-archive (@web-basic-archive) on CodePen.
アクセントリボン
See the Pen Link button - Accent ribbon by web-basic-archive (@web-basic-archive) on CodePen.
背景・枠線アクセント
背景グラデーション
See the Pen Link button - Background gradient by web-basic-archive (@web-basic-archive) on CodePen.
背景グラデーションアニメ
See the Pen Link button - Background gradient anime by web-basic-archive (@web-basic-archive) on CodePen.
グラデーションボーダー
See the Pen Link button - Gradient border by web-basic-archive (@web-basic-archive) on CodePen.
ストライプボーダー
See the Pen Link button - Stripe border by web-basic-archive (@web-basic-archive) on CodePen.
右端ザクザク
See the Pen Link button - Crunchy by web-basic-archive (@web-basic-archive) on CodePen.
右端ナミナミ
See the Pen Link button - Wave by web-basic-archive (@web-basic-archive) on CodePen.
両端三角
See the Pen Link button - Double ended triangle by web-basic-archive (@web-basic-archive) on CodePen.
括弧
隅括弧
See the Pen Link button - Square brackets by web-basic-archive (@web-basic-archive) on CodePen.
山括弧
See the Pen Link button - Angle brackets by web-basic-archive (@web-basic-archive) on CodePen.
