リンクボタンパーツ(菱形、ホバー時に色反転して枠線を入れる、clip-path使用)

[ ID : 10654 ]
こちらの記事はパス会員様向けです。
リンクボタンパーツ(菱形、ホバー時に色反転して枠線を入れる、clip-path使用)
実装目安
1分

概要

【パス会員限定】CSSのclip-pathを使用して作成した菱形のリンクボタンパーツ。ホバー時に色反転して枠線を入れるCSSアニメーションを追加。

用途・要件

  • 菱形のリンクボタンをCSSのclip-pathを使用して作成。
  • ホバー時に色反転して枠線を入れるアニメーションを実装。(PC時のみ)
  • DEMOでは水色から白色に背景色が反転。(ホバー時の背景色は透過ではないので注意)
  • a要素内のテキストはspan要素で囲む。

検証ブラウザ

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

実装

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

この記事をシェアする

関連記事

全ての記事を見る

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