/* Selector CSS por atributo */
a[href^="tel:"] {
  font-size: 15px;
  display: inline-block;
  margin: 20px 30px;
}
a.btn-first {
  color:  #fff;
}
a.btn-second {
  color:  #fff;
}
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);
}