How to add click to call button link on your website

How to add click to call button link on your website 2020

Call me button

CSS

Code1  position purpose

#callme {

    position: fixed;

    right: 160px;

    bottom: 15px;

    width: 60px;

    height: 60px;

    cursor: pointer;

  

    z-index: 555;

}

 

Code 2 position purpose

#callme {

    position: fixed;

    Left: 0px;

    top: 52%;

    width: 60px;

    height: 60px;

    cursor: pointer;

  

    z-index: 555;

}

Common code

#callme #callmeMain {

    -moz-border-radius: 50% !important;

    -webkit-border-radius: 50% !important;

    border-radius: 50% !important;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    background-color: #25d366;

    width: 60px;

    height: 60px;

    -webkit-animation: zcwmini2 1.5s 0s ease-out infinite;

    -moz-animation: zcwmini2 1.5s 0s ease-out infinite;

    animation: zcwmini2 1.5s 0s ease-out infinite;

}

#callme #callmeMain:before {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background-image: url(../images/mini.png);

    background-repeat: no-repeat;

    background-position: center center;

    -webkit-animation: zcwphone2 1.5s linear infinite;

    -moz-animation: zcwphone2 1.5s linear infinite;

    animation: zcwphone2 1.5s linear infinite;

}

@-webkit-keyframes zcwphone {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

@-moz-keyframes zcwphone {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

@keyframes zcwphone {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

@-webkit-keyframes zcwphone2 {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

@-moz-keyframes zcwphone2 {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

@keyframes zcwphone2 {

    0% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    25% {-ms-transform:rotate(30deg);-webkit-transform:rotate(30deg);transform:rotate(30deg);}

    50% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

    75% {-ms-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);transform:rotate(-30deg);}

    100% {-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}

}

 

 

 

 

 

Phone Link Code

<div id="callme">

  <a href="tel:+91 "  title="+91 "><div id="callmeMain"></div></a>

</div>

 

@ type of code

<div class="phone">

<a  target="_blank" href="Tel:+91 ">

<h5><i class="fa fa-phone fa-3x fa-spin" aria-hidden="true"></i></h5></a>

</div>

 

 

css

.phone {

    position: fixed;

    left: 15px;

    bottom: 7%;

}

 

.phone h5 {

    color: white;

    background: #0657d1;

    padding: 12px;

    border-radius: 10px;

}