AFFINGER風の光るボタンをCSSで入れたいが、文字部分が「リンクの挿入」のように青文字になる



  • お世話になります。
    AFFINGER風の光るボタンをCSSで入れたいのですが、
    参考サイトと違い、文字が青色になります。
    (当サイトだと、”例文”の文字が、リンクの挿入のように青文字になる)
    0_1652186549166_スクリーンショット 2022-05-10 21.40.36.png
    参考サイトは、文字が白抜き
    0_1652186572112_スクリーンショット 2022-05-10 21.40.50.png
    どのようにすれば、参考サイトのように白文字になるのでしょうか?
    教えていただけたら幸いです。

    参考サイト
    https://selifelog.com/blog-entry-1902.html#toc_id_1
    (キラリと光るボタンのサンプルを入れたいと思っています)

    本文に入力したHTML
    <a class="shiny-btn2" href="https://jin-theme.com/manual/">例文</a>

    追加cssに入力したもの

    .shiny-btn2 {
        display: block;
        position: relative;
        width: 80%;/*ボタンの幅*/
        padding: 10px 0;
        margin: 30px auto;
        background-color: #00c464;/*ボタンの色*/
        box-shadow: 0 3px 0 0 rgba(87, 255, 116, 0.3);/*影の色(rgbaの値を変更)*/
        border-radius: 5px;
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        overflow: hidden;
    }
    .shiny-btn2:hover {
        text-decoration: none;
        color: #fff;
        box-shadow: none;
        -webkit-transform: translateY(3px);
    }
    .shiny-btn2::before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #fff;
        transition: 0.2s;
        animation: shiny-btn2 3s ease-in-out infinite;
    }
    @-webkit-keyframes shiny-btn2 {
        0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
        80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
        81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
        100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
    }
    

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.9.3
    ご利用のサーバー名 : エックスサーバー
    PHPのバージョン :
    OS : mac OS
    ご利用のブラウザ : Safari
    該当サイトのURL : https://kifushiru.com/sankou/


  • administrators

    @shioppi さん

    こんにちは!JIN運営チームのRyotaです!

    a.shiny-btn2 {
        color: #fff;
    }
    

    これを追加することで解消すると思いますよ...!!
    あと一応JINにも光るボタンはあったりするので、参考までにどうぞ。。
    (既に知ってたら申し訳ないです。。)

    https://jin-theme.com/manual/shortcord-button/



  • @Ryota さん
    ありがとうございます!解決しました
    (JINとは関係ない問題でしたが、ご回答いただきありがとうございます)

    JINの光るボタンも好きなのですが、AFFINGERのように、派手に光るボタンを使ってみたかったので、今回CSSで入れました!


  • administrators

    @shioppi さん

    無事解決したようでよかったです٩( 'ω' )و

    JINの光るボタンも好きなのですが、AFFINGERのように、派手に光るボタンを使ってみたかったので、今回CSSで入れました!

    あ、そういうことでしたか...。。
    確かにJINのは少し控えめですもんね...!!

    また、困ったことがあればなんでも聞いていただければ嬉しいです!
    今後ともどうぞ宜しくお願いします!