<a class="btn-first" href="tel:600123456">Contacto: 600123456</a>
<a class="btn-second" href="tel:600123456">600123456</a>
<a class="btn-third" href="tel:600123456">600123456</a>
<a class="btn-fourth" href="tel:600123456">Llámanos</a>
body {
  background-color: aliceblue;
  text-align: center;
  margin: 40vh 15px;
}
/* Selector CSS por atributo */
a[href^="tel:"] {
  font-size: 24px;
  display: inline-block;
  margin: 20px 30px;
}
a.btn-first {
  
}
a.btn-second {
  color: #4CAF50;
}
a.btn-second:before {
  content: "\260e";
  margin-right: 0.5em;
}
a.btn-third {
  color: #fff;
  background-color: #FF5722;
  padding: 5px 20px;
}
/* Añadiendo icono como pseudoelemento CSS */
a.btn-third:before {
  content: "\260e";
  margin-right: 0.5em;
}
a.btn-fourth {
    padding: 5px 20px;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    border: 3px solid #2196f3;
    -webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
a.btn-fourth:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background: #2196f3;
    z-index: -1;
    -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
a.btn-fourth:hover {
    color: #fff;
    border-color: #2196f3;
}
a.btn-fourth:hover::before {
    opacity: 1;
    background-color: #2196f3;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.