OhhMuaOhhMua
  • Home
  • Hosting
    • Best Web Hosting
    • Free Web Hosting
    • VPS Hosting
  • WordPress
    • Solutions & Troubleshooting
    • Installation & Setup
    • Themes & Plugins
    • Security
  • Build PC
    • High-end Builds
    • Mid-range Builds
    • Entry-level Builds
  • Computer Tips
    • Gaming Errors & Solutions
    • PC Troubleshooting
    • Hardware Tips
    • Computer Hardware
  • Coupons & Deals
  • Tools
    • veo3 prompt generator
Reading: Contact button in the footer with added call button shake effect
Share
Notification Show More
Font ResizerAa
OhhMuaOhhMua
Font ResizerAa
  • Computer Tips
  • Hosting
  • WordPress
Search
  • Home
  • WordPress
    • Installation & Setup
    • Security
    • Solutions & Troubleshooting
    • Themes & Plugins
    • Troubleshooting
  • Hosting
    • Free Web Hosting
    • VPS Hosting
    • Best Web Hosting
  • Computer Tips
    • PC Troubleshooting
    • Gaming Errors & Solutions
    • Computer Hardware
  • Coupons & Deals
  • veo3 prompt generator
Have an existing account? Sign In
Follow US
Copyright © 2024 ohhmua. All rights reserved.
OhhMua > Blog > WordPress > Solutions & Troubleshooting > Contact button in the footer with added call button shake effect
Solutions & Troubleshooting

Contact button in the footer with added call button shake effect

Admin (Nghia Vo)
Last updated: September 21, 2024 4:30 pm
Admin (Nghia Vo)
Share
10 Min Read
Contact button
Contact button
SHARE

To improve user engagement and draw attention to your contact section, implementing a subtle shake animation on the call button in the footer can be an effective strategy. This dynamic effect not only makes the button more visually appealing but also enhances the overall user experience by highlighting the call-to-action in a professional and engaging way.

Contact button
Contact button

Advantages of the contact button code:

  • It only includes HTML and CSS, so if you have deferred JavaScript loading or delayed JavaScript, it won’t be affected. The button will be immediately available for user interaction. Just make sure to exclude the icon images from lazy loading.
  • It can be customized to your preference.
  • The contact button in the footer has an added shake effect for the call button.

Reminder: Don’t forget to replace the icons with those from your own website.

The theme used in the example is the Flatsome theme, but you can use any other theme of your choice. Just make sure to insert the correct code into the footer scripts.

<style>

@keyframes ring {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.icon-phone-w {
    animation: ring 1.5s ease-in-out infinite;
    background-size: contain;
}
.phone-mobile {display: none;}
.webantam-nav {
    position: fixed;
    right: 13px;
    background: #fff;
    border-radius: 5px;
    width: auto;
    z-index: 150;
    bottom: 70px;
    padding: 10px 0;
    border: 1px solid #f2f2f2;
}
.webantam-nav ul {list-style: none;padding: 0;margin: 0;}
.webantam-nav ul li {list-style: none!important;}
.webantam-nav ul>li a {
    border:none;
    padding: 3px;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    color: #515151;
    font-weight: 700;
    max-width: 72.19px;
    max-height: 54px;
    text-decoration: none;
}
.webantam-nav ul>li .chat_animation{display:none}
.webantam-nav ul>li a i.ticon-heart {
    background: url(https://webantam.com/wp-content/uploads/2024/08/facebook.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.webantam-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://webantam.com/wp-content/uploads/2024/08/widget_icon_light_zalo.svg) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.webantam-nav li .button {
    background: transparent;
    box-shadow: none !important;

}.webantam-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.webantam-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.webantam-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.webantam-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.webantam-nav ul>li a i.ticon-messenger {
    background: url(https://webantam.com/wp-content/uploads/2024/08/messenger.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.webantam-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.webantam-nav ul>li a i.ticon-chat-telegram {
    background: url(https://webantam.com/wp-content/uploads/2024/08/telegram.png) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
}
.webantam-nav ul>li a i.icon-phone-w {
    background: url(https://webantam.com/wp-content/uploads/2024/08/phone.png) no-repeat;
    background-size: contain;}
.webantam-nav ul li .button .btn_phone_txt {
    position: relative;
    color: black;
}
@media only screen and (max-width: 600px){
.webantam-nav li .chat_animation{display:block !Important}
 
.webantam-nav li .button .phone_animation {box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%,0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
}
.webantam-nav ul>li a{padding:0; margin:0 auto}
.webantam-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.webantam-nav li {
    float: left;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="webantam-nav">
        <ul>
            <li><a href="https://www.facebook.com/webantam43/" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Facebook</a></li>
            <li><a href="https://zalo.me/0918869237" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Chat Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0918869237" rel="nofollow" class="button">
                                <span class="phone_animation animation-shadow">
                                    <i class="icon-phone-w" aria-hidden="true"></i>
                                </span>
                                <span class="btn_phone_txt">Call</span>
                            </a>
                        </li>
                        <li><a href="https://www.messenger.com/t/webantam43/" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li><a href="https://t.me/webantam/" rel="nofollow" target="_blank"> 
            <i class="ticon-chat-telegram" aria-hidden="true" title="Telegram"></i>
                Telegram</a>
            </li>
            
        </ul>
    </div>
Contact button in the footer with added call button shake effect
Contact button in the footer with added call button shake effect

480520387 657957633334779 6814038772835954285 n
Admin (Nghia Vo)

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam’s Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions.

I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.

You Might Also Like

SEO in the Age of AI: How to Make Google Understand and Value Your Content

Cannot Fetch Sitemap in Google Search Console

Discovered – Currently Not Indexed in Google Search Console: What It Means & How to Fix It

Why 2 Backlinks per Article Might Be Killing Your SEO

What is Obsidian? Why Developers Love This Note-Taking App

Share This Article
Facebook Twitter Email Print
By Admin (Nghia Vo)
Follow:

Hi, I’m Nghia Vo: a computer hardware graduate, passionate PC hardware blogger, and entrepreneur with extensive hands-on experience building and upgrading computers for gaming, productivity, and business operations.

As the founder of Vonebuy.com, a verified ecommerce store under Vietnam's Ministry of Industry and Trade, I combine my technical knowledge with real-world business applications to help users make confident decisions. I specialize in no-nonsense guides on RAM overclocking, motherboard compatibility, SSD upgrades, and honest product reviews sharing everything I’ve tested and implemented for my customers and readers.
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Trending

4 Hidden Features of Your Motherboard You're Not Using
Hardware Tips

4 Hidden Features of Your Motherboard You’re Not Using

July 25, 2025
Top Reasons Why Your Graphics Card Is Not Working
Hardware Tips

Top Reasons Why Your Graphics Card Is Not Working (And How to Fix It)

July 26, 2025
How to Build Your Own eGPU for Your Laptop in 2025
Hardware Tips

How to Build Your Own eGPU for Your Laptop in 2025

July 27, 2025
Computer Tips

6 Tips to Boost Your Hard Drive Performance

July 28, 2023
6 PC Components to Avoid When Building Your PC in 2025
Hardware Tips

6 PC Components to Avoid When Building Your PC in 2025

July 30, 2025
Comprehensive Computer Beep Codes [Help You Fix Errors]
Computer Hardware

Comprehensive Computer Beep Codes [Help You Fix Errors]

August 22, 2020
Previous Next

You Might Also Like

Optimize WordPress
Solutions & Troubleshooting

Want Faster Load Times? Optimize WordPress This Way

May 16, 2025
My Google Discover traffic skyrocketed after I did these 10 things
Solutions & Troubleshooting

My Google Discover traffic skyrocketed after I did these 10 things

May 14, 2025
How to Add a Read More to Product Descriptions in WooCommerce
Solutions & Troubleshooting

How to Add a “Read More” and “Show Less” Button to Product Descriptions in WooCommerce

May 5, 2025
WordPress Covers Every Website Type
Solutions & Troubleshooting

Blog, E-Commerce, or Forum? WordPress Covers Every Website Type!

April 29, 2025
Previous Next
newsletter featured

Always Stay Up to Date

Subscribe to our newsletter to get our newest articles instantly!

Follow US on Social Media

Facebook Youtube Steam Twitch Unity

Copyright © 2024 ohhmua. All rights reserved.

OhhMua

Information

  • About
  • Terms & Conditions
  • Privacy Policy
Welcome Back!

Sign in to your account

Lost your password?