エフェクトを追加したボタンアイコンのリンク機能がちゃんと作動するようにしたい。

実現したいこと

●エフェクトを追加したボタンアイコンのリンク機能がちゃんと作動するようにしたい。

前提

wordpressのswellというテーマを使いサイトを制作しています。

発生している問題・エラーメッセージ

swellのボタンを配置しcssに追記を行いカーソルがボタンに触れたときに
波紋が発生するアニメーションを追加したのですが
リンクを設定しても機能しなくなりました。
普通のボタンであればリンクは機能します。
また、カーソルをボタンに当てたときに
波紋のアニメーションが発生するよりも早くクリックすれば
リンクは機能しています。
波紋のアニメーションが発生後でもリンク機能が正しく動作するためにはどうすればいいでしょうか？
~~もしくはクリックと同時に波紋が発生するようにするにはどうすればよいでしょうか？~~
(クリックが機能すると波紋の発生を見ることなくすぐリンク先に飛ぶので打消し線を入れました。）

該当のソースコード

【HTMLのコードになります】

<div class="wp-block-button is-style-fill hamon" id="top-button"><a class="wp-block-button__link wp-element-button" style="border-radius:0px">もっと見る</a></div>

【CSSのコードになります】
#top-button.wp-block-button .wp-block-button__link {
padding: calc(0.367em + 2px) calc(1.333em + 2px);
background-image: linear-gradient(0deg, rgba(226, 235, 240, 1), rgba(51, 51, 51, 1));
}

.hamon{
position: relative;
display:inline-block;
text-decoration: none;
color: rgba(0,0,0,0);
outline: none;
}
.hamon:hover::before {
content: '';
position: absolute;
left:30%;
top:0;
border: 2px solid;
background: conic-gradient(from 90deg, #C3CFE2, #F5F7FA, #C3CFE2, #F5F7FA, #C3CFE2);
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 1;
animation:1s circleanime2 forwards;
}
@keyframes circleanime2{
0%{
transform: scale(0);
}
100%{
transform:scale(3);
opacity: 0;
}
}

行動規範の内容に同意します

回答1件

ベストアンサー

疑似要素.hamon:hover::beforeがリンク要素を覆ってしまうので反応しないのでしょう。
これに、pointer-events: none; を追加してマウスイベントを透過されればどうでしょう。

pointer-events - CSS: カスケーディングスタイルシート | MDN

css
1.hamon:hover::before {
2  content: "";
3  position: absolute;
4  left: 30%;
5  top: 0;
6  border: 2px solid;
7  background: conic-gradient(
8    from 90deg,
9    #c3cfe2,
10    #f5f7fa,
11    #c3cfe2,
12    #f5f7fa,
13    #c3cfe2
14  );
15  width: 60px;
16  height: 60px;
17  border-radius: 50%;
18  opacity: 1;
19  animation: 1s circleanime2 forwards;
20  pointer-events: none; /* 追加 */
21}