CSS Liên hệ cho web 6

Copy đoạn code dưới đây chèn vào file functions.php của web hoặc tách code ra cho vào đâu tùy thích:

/* Code liên lạc */
add_action('wp_footer','custom_contact');
 
function custom_contact(){
?>

<!-- Mobile -->
<section id="azt-contact-footer-outer">
    <div id="azt-contact-footer">
	<a href="https://www.youtube.com/" target="_blank">
                <span><img src="https://i.imgur.com/JgEClyh.png" alt="Youtube"><span class="azt-contact-footer-btn-label">Youtube</span></span>
	</a>
	<a href="https://maps.google.com/" target="_blank">
                <span><img src="https://i.imgur.com/z1CyYjj.png" alt="Địa chỉ"><span class="azt-contact-footer-btn-label">Địa chỉ</span></span>
	</a>
	<a href="https://www.facebook.com/" target="_blank">
	   <span><img src="https://i.imgur.com/ml8hIer.png" alt="Messenger"><span class="azt-contact-footer-btn-label">Messenger</span></span>
	</a>
	<a href="https://chat.zalo.me/" target="_blank">
                <span><img src="https://i.imgur.com/hZntePj.png" alt="Nhắn Zalo"><span class="azt-contact-footer-btn-label">Nhắn Zalo</span></span>
	</a>
    </div>
    	<a id="azt-contact-footer-btn-center" href="tel:0916241626"><span class="phone-vr-circle-fill"></span><img src="https://i.imgur.com/sCU11gw.png" alt="Gọi điện thoại"></a>
</section>

<!-- PC -->
<section id="azt-contact-footer-outer-pc">
    <div id="azt-contact-footer-pc">
	<a href="https://maps.google.com/" target="_blank">
                <span><img src="https://i.imgur.com/z1CyYjj.png" alt="Địa chỉ cửa hàng"><span class="azt-contact-footer-btn-label">&nbsp;Địa chỉ cửa hàng</span></span>
	</a>
	<a href="https://chat.zalo.me/" target="_blank">
                <span><img src="https://i.imgur.com/hZntePj.png" alt="Tư vấn miễn phí"><span class="azt-contact-footer-btn-label">&nbsp;Tư vấn miễn phí</span></span>
	</a>
    </div>
</section>

<style>
    #azt-contact-footer-outer {
        background-image: url(https://i.imgur.com/e55S7ua.png);
        background-color: unset;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        box-shadow: unset;
        height: 75px;
        width: 103%;
        margin-left: -5px;
        margin-bottom: -5px;
        z-index: 100 !important;
        position: fixed;
        bottom: 0;
    }
    #azt-contact-footer {
        display: flex;
        align-items: center;
        max-width: 1200px;
        margin: auto;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    #azt-contact-footer > a {
        display: block;
        width: 25%;
        text-align: center;
        padding: 5px 0 5px 0;
        color: #333333;
    }
    #azt-contact-footer > span {
        display: block;
        width: 30px;
    }

    #azt-contact-footer > a:nth-child(3) {
        padding-left: 20px;
    }
    #azt-contact-footer span {
        display: block;
    }
    .azt-contact-footer-btn-label {
        padding-top: 2px;
        font-size: 13px
    }

    #azt-contact-footer > a:first-child {
        border-left: 1px solid #fff
    }

    #azt-contact-footer > a img {
        height: 30px
    }

    #azt-contact-footer-btn-center {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        background-image: linear-gradient(92.83deg, #B22828 0, #7B131E 100%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        top: -25px;
        text-align: center;
        box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0px;
        border: 2px solid #ffffff7d;
    }
    #azt-contact-footer-btn-center img{
        max-width: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .phone-vr-circle-fill {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: 0 0 0 0 #B22828;
        border: 2px solid transparent;
        transition: all .5s;
        animation: zoom 1.3s infinite;
    }

    @keyframes zoom {
        0% {

        }
        70% {

            box-shadow: 0 0 0 15px transparent
        }
        100% {

            box-shadow: 0 0 0 0 transparent
        }
    }

    #azt-contact-footer-outer-pc {
        display: none;
    }
    @media(min-width: 767px) {
        #azt-contact-footer-outer {
            display: none !important;
        }
        #azt-contact-footer-outer-pc {
            display: block;
            position: fixed;
            bottom: 10px;
            right: 10px;
            z-index: 99;
        }
        #azt-contact-footer-pc > a {
            display: block;
            background: white;
            box-shadow: 0px 4px 20px 0px rgb(0 0 0 / 9%);
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 55px;
            font-size: 14px;
            font-weight: bold;
            color: #B22828;
        }
        #azt-contact-footer-pc > a:last-child {
            animation: heartbeat 1.5s ease-in-out 5s infinite both;
        }
        @keyframes heartbeat {
            from {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transform-origin: center center;
                transform-origin: center center;
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out
            }

            10% {
                -webkit-transform: scale(.91);
                transform: scale(.91);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }

            17% {
                -webkit-transform: scale(.98);
                transform: scale(.98);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out
            }

            33% {
                -webkit-transform: scale(.87);
                transform: scale(.87);
                -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in
            }

            45% {
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out
            }
        }
        #azt-contact-footer-pc > a img {
            height: 30px
        }
    }
</style>
<?php
}

Nguồn: phuclamtra.vn