如何使按鈕顏色與我的代碼匹配

Question

CSS：

    .float
                    {
                        color: #FFF;
                        position: fixed;
                        width: 50px;
                        height: 50px;
                        bottom: 15px;
                        left: 15px;
                        background-color: #d59a57;
                        border-radius: 50px;
                        text-align: center;
                        padding-top:9px;    
                        z-index: 99;
                    }

HTML：

<a onclick="playAudio()" type="button" id='un-mute' class='float'><img src='TEMA 3 FIX/images/music-mute.png' width='30px;'></a>
<a onclick="pauseAudio()" type="button" id='mute' class='float'><img src='TEMA 3 FIX/images/music.png' width='30px;'></a>

我想要這樣：

但是，實際上結果是這樣的：

Answer 1

檢查它的父元素是否有樣式問題，這個樣式沒有問題

 .float { color: #fff; position: fixed; width: 50px; height: 50px; bottom: 15px; left: 15px; background-color: #d59a57; border-radius: 50px; text-align: center; padding-top: 9px; z-index: 99; }

 <a onclick="playAudio()" type="button" id='un-mute' class='float'><img width='30px;'></a> <a onclick="pauseAudio()" type="button" id='mute' class='float'><img width='30px;'></a>