How to Transform Your “Book Now” Button into Stunning Animated Icons in Wix Studio
Is your Wix Studio site stuck with a static “Book Now” button that blends into the background? At Wix Ideas, we believe every micro-interaction matters. In this guide, you’ll learn how to replace that boring call-to-action with an eye-catching animated button icon—no code required.
Why Animated Button Icons Matter
Boost Engagement: Movement draws attention. A morphing icon encourages more clicks than a static graphic.
Improve UX: Clear visual feedback tells visitors “your action is registered,” reducing frustration.
Reinforce Branding: Custom start/end icons let you match your site’s personality, whether it’s playful, professional, or minimalist.
Pro Tip from Wix Ideas: Animated button icons work on desktop hover and mobile tap, so your site feels interactive on any device.
Step-by-Step: Adding Animated Button Icons in Wix Studio
Add a Styled Button
In the Wix Studio Editor, open Add Elements → Buttons.
Drag the Styled Button (the one that supports icons) onto your hero section—replacing your old “Book Now” button.
Size & Style Your Button
Select your new button and open the Inspector.
Under Layout, set Width to 180 px and Height to 50 px.
In Design → Regular State, choose your background color (e.g., the same as your secondary buttons) and set text to uppercase Heading 3 at 15 px.
Apply 300 px corner radius for a pill-shaped look.
Configure Hover State
Switch to Design → Hover State, pick a contrasting background color (e.g., Color 7), and save.
This gives instant visual feedback when visitors interact.
Enable Animated Icons
Open Settings → Icon Type → Animated.
Choose Text & Icon so both label and icon participate, then link your button (e.g., to /services).
Click Browse More Icons (the “+” icon) to preview the built-in animated presets.
Select or Upload Your Icons
Pre-Designed: Scroll the Media Manager’s animated icons; hover any to preview.
Custom Pair: Click Create New, then upload a Start Icon (e.g., a “plus” sign) and an End Icon (e.g., a “check” mark). Ensure both SVGs are solid black, under 250 KB, and share a similar point count for a smooth morph.
Fine-Tune Animation Duration
Use the Duration slider to set your transition length—from a snappy 0.3 s to a dramatic 0.8 s—and preview in the live Editor or by scanning the Wix mobile preview QR code.
Preview & Publish
Delete any leftover static buttons.
Click Preview (desktop) or test on your phone/tablet.
When you’re satisfied, Publish, and watch your conversion rates climb.
Real-World Example: The “Book Now” Button Makeover
On our Medi Detail demo site at Wix Ideas, we turned a static blue “BOOK NOW” button into a vibrant call-to-action:
Before: Plain button with a calendar icon.
After: Morphing “calendar” → “rocket” icon on hover, with a 0.5 s duration.
The rocket animation reinforced urgency and drove 18% more clicks during our A/B test.
Next Steps & Resources
🔥 Ready to dive deeper? Explore our full library of step-by-step tutorials at Wix Ideas: Learn from our tutorials »
🛒 Looking for a fresh template? Shop bespoke Wix and Wix Studio designs: Browse templates »
📈 Want a custom site makeover or help sprucing up your existing pages? Get a quote today: Request your quote »
Why Choose Wix Ideas?
Expertise: We build real websites on Wix and Wix Studio, then share what works.
Hands-On Tutorials: Our YouTube channel, Wix Ideas, shows every click, setting, and preview.
Conversion Focus: Every tip—like animated button icons—is designed to increase engagement and sales.
At Wix Ideas, we’re passionate about turning small tweaks into big wins. Animate your buttons today and see the difference for yourself!
Code
Leave a comment (0)
Thanks for leaving a comment🎉
Tusar
May 1, 2025
Wix page printing
You suggestion on printing wix page helped to create print icon but print was not initiated. please help in this regard.
Reply
January 20, 2000
ahmed
May 19, 2024
wix form data
Hi i need your help also in wix form submission
the problem is that some fields are generated when $w.onReady(function () { like day & date and when i choose the student name i get the phone number from database .
and the form save only the field u fill it by ur self like input or dropdown
Reply
Walter Odibi
January 20, 2000
bromar
Sep 29, 2023
Love the tutorial!!!
You are truly great at creating these instructional videos!! Thank you! I am having trouble figuring out . . 'the triggered email' . . it is not being sent to the user submitting the form, the form and the email to the admin works great. . Could you point me to where this might have already been addressed? or any other help? On a second note. .the submit button success/failure message will go back to the default message once it's connected to the data set(I couldn't figure that out either. )
Reply
Walter Odibi
January 20, 2000
kaan
Jun 4, 2023
wishlist and rating system
hello sir I try today 2 hours but not working if you want I pay money can you do this 2 ( wishlist and rating star) system please I send to you invaid
Reply
Walter Odibi
January 20, 2000
Hi there, you can contact me here using the in-app chatbox
Waqas
Apr 16, 2023
Triggered Email Backend
Hi mate please can you send email by backend
Reply
Walter Odibi
January 20, 2000
Hi Waqas, there isn't a backend code for this tutorial. The emails will be sent from the client-side.
Ghan
Dec 29, 2022
Great Tutorial
Hi !
First of all, I want to thank you for your great tutorials, they helped us a lot with the coding.
But I still need your help, if you don't mind. I have based on Save Calculated Field using Wix Data Hooks Codes, to code my form . but the problem is I don't know why the code only reads the computation for "week2" computation and not the "weeks"
here is the code
I also did a separate column in the dataset where the chosen datas for both fields will be placed.
$w.onReady (() => {
$w("#Person").onChange(() => {
$w("#weeks").onChange(() => {
$w("#week2").onChange(() => {
let person = Number($w("#Person").value);
let weeks = Number($w("#weeks").value);
let week2 = Number($w("#week2").value);
$w("#totalLabel").show();
$w("#totalLabel").text = `"${String(weeks * Number(person))}페소"`; //DESIGN YOUR MESSAGE
$w("#totalLabel").text = `"${String(week2 * Number(person))}페소"`; //DESIGN YOUR MESSAGE
});
});
});
});
Reply
Walter Odibi
January 20, 2000
Hi there, thanks for your comment. I see why this is a problem. The onChange() function seems wrong in combination.
To combine onChangeFunctions use this method
$w("#Person, #weeks, #weeks2").onChange(() => {
//code here
});
Walter
Aug 8, 2022
More Details? Watch video
Hi, you can click here to watch the video https://www.youtube.com/watch?v=9bx7-nBeZ5c
Reply
Walter Odibi
January 20, 2000
Walter
Jul 11, 2022
For you
📺 WATCH THE VIDEO https://www.youtube.com/watch?v=AgPJEU8wpp0
Reply
Walter Odibi
January 20, 2000
Walter Odibi
Apr 18, 2022
Awesome Feature
This tutorial shows you how to display views on your Wix repeater.
📺WATCH VIDEO HERE https://www.youtube.com/watch?v=Iz7SdaCSdXg
Reply
Walter Odibi
January 20, 2000
Walter Odibi
Apr 18, 2022
Amazing tutorial
This amazing tutorial will show you how to a comment section to your WIX dynamic page.
📺WATCH VIDEO HERE https://www.youtube.com/watch?v=f8-vJQFNZ_c
Reply
Walter Odibi
January 20, 2000
Walter Odibi
Apr 10, 2022
Great Feature🎉
This amazing tutorial will show you how to add a visitor view counter to your WIX dynamic page.
🚩MORE TUTORIALS https://www.wixgenius.com/wix-tutorials
Reply
Walter Odibi
January 20, 2000
RELATED TUTORIALS 🚀
Free Wix Comment App