أجمل أضافة زر واتساب الي مدونتك بدون سكربتات

أجمل إضافة زر واتساب إلى مدونتك بدون سكريبتات

اليوم سنقوم بتركيب رسوم متحركة جميلة للاتصال عبر WhatsApp مباشرة من الموقع، وذلك باستخدام CSS فقط بدون أي إضافات خارجية. هذه الطريقة مناسبة لأي موقع بما في ذلك WordPress وبلوجر.

رابط دردشة واتساب لموقع الويب:

https://api.whatsapp.com/send?phone=79000000000

كود HTML الأساسي:

<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Write to Whatsapp" rel="noopener noreferrer"></a>

ملاحظة: استبدل phone=79260000000 برقم WhatsApp الخاص بك مع كود الدولة.

الزر الأول (بسيط مع تأثير متحرك)

كود HTML:

<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Write to Whatsapp" rel="noopener noreferrer">
  <div class="whatsapp-button"><i class="fa fa-whatsapp"></i></div>
</a>

كود CSS:

.whatsapp-button {

    position: fixed;

    right: 13px;

    bottom: 90px;

    transform: translate(-50%, -50%);

    background: #25D366; /*цвет кнопки*/

    border-radius: 50%;

    width: 55px; /*ширина кнопки*/

    height: 55px; /*высота кнопки*/

    color: #fff;

    text-align: center;

    line-height: 53px; /*центровка иконки в кнопке*/

    font-size: 35px; /*размер иконки*/

    z-index: 9999;

}

.whatsapp-button a {

    color: #fff;

}

.whatsapp-button:before,

.whatsapp-button:after {

    content: " ";

    display: block;

    position: absolute;

    border: 50%;

    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/

    left: -20px;

    right: -20px;

    top: -20px;

    bottom: -20px;

    border-radius: 50%;

    animation: animate 1.5s linear infinite;

    opacity: 0;

    backface-visibility: hidden; 

}

 

.whatsapp-button:after{

    animation-delay: .5s;

}

 

@keyframes animate

{

    0%

    {

        transform: scale(0.5);

        opacity: 0;

    }

    50%

    {

        opacity: 1;

    }

    100%

    {

        transform: scale(1.2);

        opacity: 0;

    }

}
    

نسخة الموبايل:

@media (max-width: 800px) {
    .whatsapp-button {
        bottom: 5px;
        left: 70px;
    }
}

الزر الثاني (متقدم مع تأثيرات متحركة إضافية)

كود HTML:

<a href="https://api.whatsapp.com/send?phone=79260000000" target="_blank" rel="noopener noreferrer">
  <i class="fa fa-whatsapp"></i>
  <div type="button" class="whatsapp-button">
    <div class="text-button">
      <i class="fa fa-whatsapp"></i>
      <span>WhatsApp</span>
    </div>
  </div>
</a>

كود CSS:

.whatsapp-button {
    background: #25D366;
    border: 3px solid #1cc15a;
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6);
    cursor: pointer;
    height: 68px;
    text-align: center;
    width: 68px;
    position: fixed;
    right: 5%;
    bottom: 8%;
    z-index: 9999;
    transition: .3s;
    animation: hoverWave linear 1s infinite;
}

.whatsapp-button .text-button {
    height: 68px;
    width: 68px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.whatsapp-button .text-button span {
    text-align: center;
    color: #23a455;
    opacity: 0;
    font-size: 0;
    position: absolute;
    right: 8px;
    top: 27px;
    line-height: 14px;
    font-weight: 600;
    transition: opacity .3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.whatsapp-button .text-button:hover span {
    opacity: 1;
    font-size: 11px;
}

.whatsapp-button:hover i {
    display: none;
}

.whatsapp-button:hover {
    z-index: 1;
    background: #fff;
    color: transparent;
    transition: .3s;
}

.whatsapp-button i {
    color: #fff;
    font-size: 44px;
    transition: .3s;
    line-height: 66px;
    animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
}

@keyframes hoverWave {
    0% { box-shadow: 0 8px 10px rgba(7,206,112,0.3), 0 0 0 0 rgba(7,206,112,0.2), 0 0 0 0 rgba(7,206,112,0.2) }
    40% { box-shadow: 0 8px 10px rgba(7,206,112,0.3), 0 0 0 15px rgba(7,206,112,0.2), 0 0 0 0 rgba(7,206,112,0.2) }
    80% { box-shadow: 0 8px 10px rgba(7,206,112,0.3), 0 0 0 30px rgba(7,206,112,0), 0 0 0 26.7px rgba(7,206,112,0.067) }
    100% { box-shadow: 0 8px 10px rgba(7,206,112,0.3), 0 0 0 30px rgba(7,206,112,0), 0 0 0 40px rgba(7,206,112,0.0) }
}

@keyframes shake {
    0% { transform: rotateZ(0deg) }
    10% { transform: rotateZ(-30deg) }
    20% { transform: rotateZ(15deg) }
    30% { transform: rotateZ(-10deg) }
    40% { transform: rotateZ(7.5deg) }
    50% { transform: rotateZ(-6deg) }
    60% { transform: rotateZ(5deg) }
    70% { transform: rotateZ(-4.28571deg) }
    80% { transform: rotateZ(3.75deg) }
    90% { transform: rotateZ(-3.33333deg) }
    100% { transform: rotateZ(0deg) }
}

كيف كان المقال؟