枠線ありの矢印リンク(右向き、複数行対応、clip-path使用)

[ ID : 8643 ]
こちらの記事はパス会員様向けです。
枠線ありの矢印リンク(右向き、複数行対応、clip-path使用)
実装目安
1分

概要

【パス会員限定】CSSのclip-pathプロパティを使用して1pxの枠線がある右向き矢印リンクを実装。

用途・要件

  • CSSで1pxの枠線がある右向き矢印リンクボタン(aタグ)を作成。
  • CSSのclip-pathプロパティを使用。(IE11非対応)
  • 複数行になっても崩れない。
  • 調整し易いようにCSS変数を使用。
  • ホバー時に文字色と背景色を反転するCSSアニメーションあり。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

注意事項

  • 線の太さは1pxを想定しています。

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録