[ 質問者返信待ち ] ボタンにアニメーションをつける

[翼佐藤]

■ WordPress のバージョン
6.7

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
15.28.0

■ スキンの種類
Origin II

■ 期待する動作
添付画像のボタンを実装したいです。

要件
ボタンとして実装し、クリック時に”View More”をふわっと上に。
矢印をふわっと右に動くようにしたい。

またそもそも、ボタンブロックを使用し、添付画像のようにView Moreと矢印の位置をずらしたり、
画像のような矢印を実装することは可能でしょうか？

分かる方おりましたらご回答何卒よろしくお願いいたします。

■ 自分で試した事
ボタンブロックでの実装を試してみた。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
View Moreの文字は入るが、デザインにある矢印の実装ができない。
View Moreと矢印をずらすことができない。
アニメーション実装ができない。

Attachments:

You must be logged in to view attached files.

[うなこ]

お世話になっております。

こちらのパターンがご希望のイメージに近いのではないかと思いましたので、ご案内申し上げます。

ボタン_続きを見る矢印リンク_カスタムCSS

なお、矢印部分は CSS の before および after 要素で実装されております。
ご確認のほど、よろしくお願いいたします。

[瀬戸内ことり]

うなこさんがお示しくださっているもののうち「Hover時に矢印が動く」の１つ目を少し触ってみました。

こんな感じでしょうか。
(以下のコードを投稿画面に貼り付けてみてください)

<!-- wp:paragraph {"vkbCustomCss":"/* Hover時に矢印が動く */\nselector a {\n  position: relative;\n  display: inline-block;\n  padding-right: 50px;\n  text-decoration: none;\n  color: currentColor;\n  transition: transform 0.2s ease, color 0.2s ease; /* ふわっと移動のアニメーション */\n}\n\nselector a::before {\n  width: 100px;\n  bottom: 2%;\n  right: 3px !important;\n  border-bottom: solid 2px currentColor;\n}\n\nselector a::after {\n  width: 30px;\n  background: currentColor;\n  bottom: calc(50% - 3px);\n  transform: rotate(45deg);\n}\n\n/* 共通 */\nselector a::before,\nselector a::after {\n  content: '';\n  position: absolute;\n  display: block;\n  height: 1.5px;\n  right: 0;\n  transition: all 0.2s linear;\n}\n\n/* hover時：矢印が右に動く */\nselector a:hover::before {\n  right: -10px !important;\n}\nselector a:hover::after {\n  right: -14px !important;\n}\n\n/* hover時：テキストがふわっと上に移動 */\nselector a:hover {\n  transform: translateY(-3px); /* 3px上に移動 */\n}","className":"vk_custom_css","style":{"typography":{"fontSize":"1.25rem"}},"textColor":"black"} -->
<p class="vk_custom_css has-black-color has-text-color" style="font-size:1.25rem"><a href="#">View More</a></p>
<!-- /wp:paragraph -->

※ 私の環境で作業しました故、お使いの環境や既に施されているカスタマイズ等によって修正が必要になる可能性がございます。

Attachments:

You must be logged in to view attached files.

[瀬戸内ことり]

すみません。動画を添付すると、ダウンロード視聴が必要になるんですね。
ダウンロードしなくてもご確認いただけるよう、gif に変換して添付します。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿