Streaming live at 10am (PST)

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

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: Webflow - viivaa

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

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

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.

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

@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.

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