Custom CSS for your WhatsApp Widget

WhatsApp Icon right alignment + text and one color

.tochatbe-widget__trigger {

    border-radius: 2em;

    padding: 10px 15px;

    font-size: 18px;

    font-weight: bold;

    display: flex;

    align-items: center;

    background-color: #02ad00;

}

.tochatbe-icon-whatsapp {

    font-size: 1.5em;

    margin-right: .3em;

}

WhatsApp Icon left alignment + text and one color

.tochatbe-widget__trigger {

    border-radius: 2em;

    padding: 10px 15px;

    font-size: 18px;

    font-weight: bold;

    background-color: #02ad00;

    display: flex;

    align-items: center;

    flex-flow: row-reverse;

}

.tochatbe-icon-whatsapp {

    font-size: 1.5em;

    margin-left: .3em;

}

WhatsApp Icon right alignment + text and two colors

.tochatbe-widget__trigger {

    border-radius: 2em;

    font-size: 18px;

    font-weight: bold;

    display: flex;

    align-items: center;

    flex-flow: row-reverse;

    padding: 0 0 0 15px;

    overflow: hidden;

}

.tochatbe-icon-whatsapp {

    font-size: 1.5em;

    background: #017e00;

    padding: 10px 15px 10px 10px;

    margin-left: 7px;

}

WhatsApp Icon left alignment + text and two colors

.tochatbe-widget__trigger {

    border-radius: 2em;

    font-size: 18px;

    font-weight: bold;

    display: flex;

    align-items: center;

    flex-flow: row;

    padding: 0 15px 0 0;

    overflow: hidden;

}

.tochatbe-icon-whatsapp {

    font-size: 1.5em;

    background: #017e00;

    padding: 10px 10px 10px 15px;

    margin-right: 7px;

}

Just WhatsApp Icon

.tochatbe-widget__trigger {

        border-radius: 50%;

        font-size: 0px;

        font-weight: bold;

        display: flex;

        align-items: center;

        flex-flow: row;

        padding: 0;

        overflow: hidden;

        width: 75px;

        height: 75px;

        justify-content: center;

    }

    .tochatbe-icon-whatsapp {

        font-size: 54px;

        padding: 10px;

        position: relative;

        top: -1px;

    }

Just WhatsApp Icon, with Shadow

    .tochatbe-widget__trigger {

        border-radius: 50%;

        font-size: 0px;

        font-weight: bold;

        display: flex;

        align-items: center;

        flex-flow: row;

        padding: 0;

        overflow: hidden;

        width: 75px;

        height: 75px;

        justify-content: center;

        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

    }

    .tochatbe-icon-whatsapp {

        font-size: 54px;

        padding: 10px;

        position: relative;

        top: -1px;

    }