Link css (head)
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
HTML
<strong class="title" align="center" style="word-spacing:5px;">
<a href="tel:0859113737"><button type="button" class="btn btn-primary btn-lg btn3d"><i class="fas fa-phone-square"></i> โทร</button></a>
<a href="https://lin.ee/M3jYt9p"><button type="button" class="btn btn-success btn-lg btn3d"><i class="fab fa-line"></i> ไลน์</button></a>
<a target="_blank" href="https://m.me/vir9web"><button type="button" class="btn btn-info btn-lg btn3d"><i class="fab fa-facebook-messenger"></i> อินบ๊อก</button></a>
</strong>
<span class="details">สนใจเรียนคอร์ส อย่าลังเลที่จะบอกเรา แล้วพบกันที่คอร์ส!</span>
CSS
/* button 3 color*/
.btn3d {
position: relative;
top: -6px;
border: 0;
transition: all 40ms linear;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 2px;
margin-right: 2px;
}
.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
-moz-outline-style: none;
outline: medium none;
}
.btn3d:active,
.btn3d.active {
top: 2px;
}
.btn3d.btn-default {
color: #666666;
box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255, 255, 255, 0.10) inset, 0 8px 0 0 #BEBEBE, 0 8px 8px 1px rgba(0, 0, 0, .2);
background-color: #f9f9f9;
}
.btn3d.btn-default:active,
.btn3d.btn-default.active {
color: #666666;
box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1);
background-color: #f9f9f9;
}
.btn3d.btn-primary {
box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
background-color: #4274D7;
}
.btn3d.btn-primary:active,
.btn3d.btn-primary.active {
box-shadow: 0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
background-color: #4274D7;
}
.btn3d.btn-success {
box-shadow: 0 0 0 1px #31c300 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #5eb924, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
background-color: #78d739;
}
.btn3d.btn-success:active,
.btn3d.btn-success.active {
box-shadow: 0 0 0 1px #30cd00 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
background-color: #78d739;
}
.btn3d.btn-info {
box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 8px 0 0 #348FD2, 0 8px 8px 1px rgba(0, 0, 0, 0.5);
background-color: #39B3D7;
}
.btn3d.btn-info:active,
.btn3d.btn-info.active {
box-shadow: 0 0 0 1px #00a5c3 inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, 0.3);
background-color: #39B3D7;
}