/* 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: #2196f3;
	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);
}

Resources