博主的 WhatsApp 分享按钮

Question

我有一个 WhatsApp 分享按钮，但我遇到了一些问题。分享功能很好，但问题是当页面加载时（或离开页面时），按钮的背景色会短时间显示在整个页面上，看起来很难看。有人可以帮我解决吗？我应该在此代码中更改什么，以便在页面加载时显示原始主题颜色而不是此 WhatsApp 按钮的颜色？提前致谢。

<style>
body{background-color:#49C34F}
.mct_whatsapp_btn {
    background: #11A518;
    color: white;
    font-size: 16px;
    padding: 6px 9px 6px 28px;
    border-radius: 2px;
    position: relative;
    transition: ease-in all 0.3s;
    moz-transition: ease-in all 0.3s;
    -o-transition:ease-in all 0.3s;
    -webkit-transition: ease-in all 0.3s;
    text-decoration: none;
    box-shadow: inset 3px 1px 1px rgba(17, 165, 24, 0.25);
    border: 1px solid #028408;
}

.mct_whatsapp_btn:before {
    content: '';
    background: url(BACKGROUND IMAGE URL);
    position:absolute;
    top: 6px;
    left: 7px;
    width:16px;
    transition: ease-in all 0.3s;
    moz-transition: ease-in all 0.3s;
    -o-transition:ease-in all 0.3s;
    -webkit-transition: ease-in all 0.3s;
    height:16px;
}

.mct_whatsapp_btn:hover {
    background: #028408;
    text-decoration: none;
    color:white;
    border: 1px solid #11A518;
    box-shadow: inset 3px 1px 1px rgba(2, 132, 8, 0.25);
}

.mct_whatsapp_btn:hover:before {
    transform: rotate(360deg);
}
</style>

<body>
<div class="container">
 <div class="row">
  <div class="col-md-12 well">


    <a class="mct_whatsapp_btn" data-link="" data-text="" href="whatsapp://send?text=">Share</a>

   </div>

Answer 1

删除第一个代码块body{background-color:#49C34F}

博主的 WhatsApp 分享按钮

WhatsApp Share button for blogger

html

css

blogger

whatsapp