• June 26, 2020

    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;
    }
    


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories


Uncategorized