More conspicuous buttons: How can you enlarge call to action buttons or animate them with a color change?

Design help Animations & Interactions
1

Hello everyone! Can someone please help me and explain to me how I can enlarge a call to action button with an animation or change the color gradient. My goal is that the button catches the user’s eye a lot more than is currently the case.

Please have a look at my preview link, here you will find the current call to action buttons. Currently, all buttons (which redirect to an external website) are just normal buttons with a hover effect. But unfortunately these buttons are clicked too seldom, so I want to make them more conspicuous with an animation.

I would be very happy about help!

Best regards
Mark

Here is my public share link: https://preview.webflow.com/preview/viivaa-319943-fc6d9ab39548c47fcd16ff1c6?utm_medium=preview_link&utm_source=designer&utm_content=viivaa-319943-fc6d9ab39548c47fcd16ff1c6&preview=e6199f22fe5cc02082f3bbbf9bb07ebf&pageId=6155ca2a3c86b4845b8f6d5c&itemId=6155ca2a3c86b40a888f7227&workflow=preview

([how to access public share link][2])

[1]:
[2]: Share a read-only link | Webflow University

2

Hey @Mark_viivaa , there are custom code solutions or even Webflow interactions. It is just depended on your creativity. On one of my client websites, I have the CTA as a pulsating glowing button to attract attention.

3

Hi @imtiazraqib thanks a lot for your answer. I was just on the website … and immediately got hungry for Indian food :slight_smile: The page looks nice … and the “deliver” button is great, that’s how I imagined the principle for my button. Could you maybe explain to me how I can do it that way? That would be great and would help me a lot!

I’m looking forward to hearing from you again, best regards
mark

4

@Mark_viivaa I am glad :eyes:

I resorted to custom code for this but it is 100% possible with Webflow interactions. For a very simple setup, this is what I did:

  1. Add the button element to your project and give it a classname such as glowing_button
  2. Style it as you wish
  3. Add this custom code using an Custom Code Embed or within your Project Page in the Before </body> section 
@keyframes glowing {
  0% {
    background-color: #b41e00;
    box-shadow: 0 0 5px #b41e00;
  }
  50% {
    background-color: #ef4826;
    box-shadow: 0 0 20px #ef4826;
  }
  100% {
    background-color: #b41e00;
    box-shadow: 0 0 5px #b41e00;
  }
  }
  .glowing_button {
    animation: glowing 1300ms infinite;
  }

The background-color for 0% and 100% need to be replaced with your button’s background color. For the middle 50%, use a lighter shade of your color to give it the glow effect.

For a visual breakdown, you can view my codepen here.

5

Hey @imtiazraqib great, thanks a lot for this instruction. I will try it on weekend and will come back to you next week.

Have a good weekend and thanks again for your support, I really appreciate this!

Greeting
Mark

6

This is exactly what I need, but unfortunately it doesn’t seem to be working. When I paste that code into Webflow, it’s grayed out and says “Custom code is not validated.” Any suggestions?

7

Hey @NicholasRyanH , are you able to share a read-only link to your project? I can try and help.