実現したいこと
●エフェクトを追加したボタンアイコンのリンク機能がちゃんと作動するようにしたい。
前提
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/24 01:59