Tìm theo từ khóa
Generic filters
Exact matches only
Nút liên hệ website

Code nút liên hệ 03

Aiken Trung Leave a comment 3588 Views Xem & chỉnh code online


Demo chân trang

<style>
	.success.is-underline:hover, .success.is-outline:hover, .success {
    background-color: #0160a0 !important;
}
            .call-mobile {background: #ED1C24;position: fixed;bottom: 10px;height: 36px;line-height: 36px;
                padding: 0 0px 0 0px;border-radius: 36px;color: #fff;left: 10px;z-index: 99999;
				    font-size: 14px;
                }
            .call-mobile1 {position: fixed;bottom: 95px;height: 40px;line-height: 40px;
                padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 10px;z-index: 99999;
				    font-size: 14px;
                }
	.call-mobile2 {position: fixed;bottom: 96px;height: 40px;line-height: 40px;
                padding: 0 0px 0 0px;border-radius: 40px;color: #fff;left: 10px;z-index: 99999;
		    font-size: 14px;
                }
			.call-mobile i {font-size: 20px;line-height: 40px;background: #B52026;
                border-radius: 100%;width: 40px;height: 40px;
                text-align: center; float: right;
				    font-size: 14px;
            }
            .call-mobile a {color: #fff;font-size: 18px;font-weight: bold; text-decoration: none;
                    margin-right: 10px; padding-left: 10px;    font-size: 14px;}
	
		</style>
<style>
	.hotline {
    position: fixed;
    left: 10px;
    bottom: 20px;
    z-index: 9000;
    display: block;
    background: #df043e;
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 99px;
		    font-size: 15px;
}
	.hotline .hotline-number {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}
	.ctrlq.fb-button {
    z-index: 999;
    background: url(https://codfe.com/wp-content/uploads/2020/06/Facebook-Messenger.jpg) center no-repeat #0084ff;
    width: 60px;
    height: 60px;
    text-align: center;
    bottom: 10px;
    border: 0;
    outline: 0;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    -webkit-transition: box-shadow .2s ease;
    background-size: 80%;
    transition: all .2s ease-in-out;
}
.bubble {
    width: 20px;
    height: 20px;
    background: #c00;
    color: #fff;
    position: absolute;
    z-index: 999999999;
    text-align: center;
    vertical-align: middle;
    top: -2px;
    left: -5px;
    border-radius: 50%;
}
.ctrlq.fb-overlay {
    z-index: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    -webkit-transition: opacity .4s, visibility .4s;
    transition: opacity .4s, visibility .4s;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .05);
    display: none;
}
.fb-widget {
    background: #fff;
    z-index: 1000;
    position: fixed;
    width: 360px;
    height: 435px;
    overflow: hidden;
    opacity: 0;
    bottom: 0;
    right: 24px;
    border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
}
.bubble-msg {
    width: 120px;
    left: -140px;
    top: 5px;
    position: relative;
    background: rgba(59, 89, 152, .8);
    color: #fff;
    padding: 5px 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
}
.ctrlq.fb-button, .ctrlq.fb-close {
    position: fixed;
    right: 24px;
    cursor: pointer;
	bottom: 20px;
}
.ctrlq.fb-button:focus, .ctrlq.fb-button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24);
}
</style>
<div class="call-mobile1"> <a data-animate="fadeInDown" rel="noopener noreferrer" href="http://zalo.me/0903172969" target="_blank" class="button success" style="border-radius:99px;background: #0c8800 !important;" data-animated="true"> <span>Chat Zalo </span></a></div>


<div class="hotlinefix">
<span class="phone">	
<p><a href="tel:0903172969">0903.172.969</a></p>
<p><a href="tel:0903172969">0903.172.969</a></p>

</span>
<div class="circle-hotline">
<span><img src="https://codfe.com/wp-content/uploads/2020/06/hotline.png"></span>
</div>
</div>
<style>
	.hotline-chat {
				position: fixed;
				bottom: -12px;
				right: -9px;
				z-index: 99;
			}
			.circle-hotline-chat {
			    height: 50px;
			    width: 50px;
			    border-radius: 50%;
			    background-color: #0080FF;
			    -webkit-transition: height .25s ease, width .25s ease;
			    transition: height .25s ease, width .25s ease;
			    -webkit-transform: translate(-50%,-50%);
			    transform: translate(-50%,-50%);
			    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
		        margin-top: 3px;
    			margin-left: -3px;
			}
			.circle-hotline-chat span {
			    margin: 12px;
    			display: inline-block;
			}
			.circle-hotline-chat:before,
			.circle-hotline-chat:after {
			  content:'';
			  display:block;
			  position:absolute;
			  top:0;
			  right:0;
			  bottom:0;
			  left:0;
			  border-radius:50%;
			  border: 1px solid #0080FF;
			}
			.circle-hotline-chat:before {
			  -webkit-animation: ripple 2s linear infinite;
			  animation: ripple 2s linear infinite;
			}
			.circle-hotline-chat:after {
			  -webkit-animation: ripple 2s linear 1s infinite;
			  animation: ripple 2s linear 1s infinite;
			}
			.circle-hotline-chat:hover:before,
			.circle-hotline-chat:hover:after {
			  -webkit-animation: none;
			  animation: none;
			}

			@-webkit-keyframes ripple{
			  0% {-webkit-transform:scale(1); }
			  75% {-webkit-transform:scale(1.75); opacity:1;}
			  100% {-webkit-transform:scale(2); opacity:0;}
			}

			@keyframes ripple{
			  0% {transform:scale(1); }
			  75% {transform:scale(1.75); opacity:1;}
			  100% {transform:scale(2); opacity:0;}
			}
			.circle-hotline-chat img {
				width: 50px;
				max-width: 100%;
        		height: auto;
			}
			.hotline-chat .phone {
				font-size: 16px;
			    font-weight: bold;
			    background: #F00;
			    color: white;
			    padding: 1px 30px 1px 75px;
			    border-radius: 39px;
			    left: -25px;
			    top: -25px;
			    position: absolute;
			    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
			}
			#home-chat .hotline-chat .phone p {
			    line-height: 15px;
			    margin-top: 8px;
			    margin-bottom: 8px;
			}
			#home-chat .hotline-chat .phone p a{
				font-style: inherit;
			    color: white;
			    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
			    font-size: 14px;
			    font-weight: bold;
			    text-decoration: none;
			}
.hotlinefix {
				position: fixed;
				bottom: 6px;
				left: 42px;
				z-index: 99;
			}
			.circle-hotline {
			    height: 50px;
			    width: 50px;
			    border-radius: 50%;
			    background-color: #F00;
			    -webkit-transition: height .25s ease, width .25s ease;
			    transition: height .25s ease, width .25s ease;
			    -webkit-transform: translate(-50%,-50%);
			    transform: translate(-50%,-50%);
			    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
		        margin-top: 3px;
    			margin-left: -3px;
			}
			.circle-hotline span {
			    margin: 12px;
    			display: inline-block;
			}
			.circle-hotline:before,
			.circle-hotline:after {
			  content:'';
			  display:block;
			  position:absolute;
			  top:0;
			  right:0;
			  bottom:0;
			  left:0;
			  border-radius:50%;
			  border: 1px solid #F00;
			}
			.circle-hotline:before {
			  -webkit-animation: ripple 2s linear infinite;
			  animation: ripple 2s linear infinite;
			}
			.circle-hotline:after {
			  -webkit-animation: ripple 2s linear 1s infinite;
			  animation: ripple 2s linear 1s infinite;
			}
			.circle-hotline:hover:before,
			.circle-hotline:hover:after {
			  -webkit-animation: none;
			  animation: none;
			}

			@-webkit-keyframes ripple{
			  0% {-webkit-transform:scale(1); }
			  75% {-webkit-transform:scale(1.75); opacity:1;}
			  100% {-webkit-transform:scale(2); opacity:0;}
			}

			@keyframes ripple{
			  0% {transform:scale(1); }
			  75% {transform:scale(1.75); opacity:1;}
			  100% {transform:scale(2); opacity:0;}
			}
			.circle-hotline img {
				width: 50px;
				 max-width: 100%;
        		height: auto;
			}
			.hotlinefix .phone {
				font-size: 14px;
			    font-weight: bold;
			    background: #FFF;
			    color: #F00;
			    padding: 8px 30px 1px 75px;
			    border-radius: 39px;
			    left: -30px;
			    top: -29px;
			    position: absolute;
			    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
			}
			.hotlinefix .phone p {
			    line-height: 8px;
			    margin-top: 6px;
			    margin-bottom: 4px;
			}
			.hotlinefix .phone p a{
				font-style: inherit;
			    color: #F00;
			    text-shadow: none;
			    font-size: 15px;
			    font-weight: bold;
			    text-decoration: none;
			}
	#messengerButton {
display: inline-block;
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 100%;
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);
background: #fff url("https://thaibinhweb.net/wp-content/uploads/2018/05/cbskn-228t7.png") center center no-repeat;
margin-bottom: 10px;
}
a#messengerButton {outline:none; }
a#messengerButton:hover {
	text-decoration:none;
	background: #f16029 url("https://thaibinhweb.net/wp-content/uploads/2018/05/cbskn-228t7.png") center center no-repeat;
	}
a#messengerButton span {
 z-index:10;display:none; 
 padding:10px;
 left:45px;
 width:200px; 
 line-height:16px;
 border-radius:4px;
 box-shadow: 5px 5px 8px #CCC;
}
a#messengerButton:hover span {
 display:inline; position:absolute; color:#111;
 border:1px solid #DCA; background:#fffAF0;
 } 
@media (max-width: 640px) {
	a#messengerButton:hover span{
		display: none;
	}
}

#zaloButton {
display: inline-block;
position: relative;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 100%;
box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);
background:  #ef0303 url("https://thaibinhweb.net/wp-content/uploads/2018/05/cbymx-eppw1.png") center center no-repeat;
margin-bottom: 10px;
}
a#zaloButton {outline:none; }
a#zaloButton:hover {
	text-decoration:none;
	background:  #f16029 url("https://thaibinhweb.net/wp-content/uploads/2018/05/cbymx-eppw1.png") center center no-repeat;
	}
a#zaloButton span {
 z-index:10;
 display:none; 
 padding:10px;
 left:45px;
 width:200px; 
 line-height:16px;
 border-radius:4px;
 box-shadow: 5px 5px 8px #CCC;
}
a#zaloButton:hover span {
 display:inline; position:absolute; color:#111;
 border:1px solid #DCA; background:#fffAF0;
 } 
</style>
<style>
           

.ctrlq.fb-button {
    z-index: 999;
    background: url(https://thaibinhweb.net/wp-content/uploads/2018/10/khuong3012.jpg) center no-repeat #0084ff;
    width: 60px;
    height: 60px;
    text-align: center;
    bottom: 10px;
    border: 0;
    outline: 0;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    -webkit-transition: box-shadow .2s ease;
    background-size: 80%;
    transition: all .2s ease-in-out;
}
.bubble {
    width: 20px;
    height: 20px;
    background: #c00;
    color: #fff;
    position: absolute;
    z-index: 999999999;
    text-align: center;
    vertical-align: middle;
    top: -2px;
    left: -5px;
    border-radius: 50%;
}
.ctrlq.fb-overlay {
    z-index: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    -webkit-transition: opacity .4s, visibility .4s;
    transition: opacity .4s, visibility .4s;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .05);
    display: none;
}
.fb-widget {
    background: #fff;
    z-index: 1000;
    position: fixed;
    width: 360px;
    height: 435px;
    overflow: hidden;
    opacity: 0;
    bottom: 0;
    right: 24px;
    border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-border-radius: 6px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
    -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
}
.bubble-msg {
    width: 120px;
    left: -140px;
    top: 5px;
    position: relative;
    background: rgba(59, 89, 152, .8);
    color: #fff;
    padding: 5px 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
}
.ctrlq.fb-button, .ctrlq.fb-close {
    position: fixed;
    right: 24px;
    cursor: pointer;
}
.ctrlq.fb-button:focus, .ctrlq.fb-button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24);
}
</style>
<a target="_blank" href="https://www.messenger.com/t/khuong3012" title="Gửi tin nhắn cho chúng tôi qua Facebook" class="ctrlq fb-button"> <div class="bubble">1</div><div class="bubble-msg">Bạn cần hỗ trợ?</div></a>



<a id="register-link" target="_blank"  href="https://zalo.me/0903172969">
<div class="hovergallery">
<img class="alignnone1 size-full " src="https://thaibinhweb.net/wp-content/uploads/2018/10/Unt44444itled-1.png" alt="btn-dangkyhocthu">
</div>
</a>
<style>
#register-link {
    position: fixed;
    bottom: 160px;
    right: 10px;
    z-index: 1000;
    width: 60px;
}
</style>

 

Chat Zalo

0903.172.969

0903.172.969
1
Bạn cần hỗ trợ?
btn-dangkyhocthu
Đánh giá nội dung này
Bài viết mới:

Bài viết cùng chủ đề:

Aiken Trung

Hệ thống, đúc kết lại những gì mình học và làm rồi chia sẻ

0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Mới nhất
Cũ nhất Được bỏ phiếu nhiều nhất
Bạn phải là thành viên mới có thể lưu code! Đăng ký thành viên



    Vui lòng nhập email để nhận code!

      0
      Rất thích suy nghĩ của bạn, hãy bình luận.x