CATEGORY
DID YOU KNOW WE HAVE A PODCAST?

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

The Future of the Marketing Call-To-Action Button: Big, Shiny & Animated

Click me. Go on, I dare you.
Click me, squeeze me! Go on, I dare you.

Inspired by a conversion tip from our friends at Wider Funnel, where they suggest that BOB – the Big Orange Button – is an overtly clickable button color, I thought I’d talk a bit about what the web is doing to help improve marketing’s most important element – the Call To Action (CTA).

Buttons on the web have always been a bit lame, forcing designers to find creative ways to improve the customers’ level of click desire.

Well listen up, cos it’s all about to change. Sorta. Kinda. Perhaps in a little while.

Or right away if you use the Safari web browser (sadly I don’t – I’m still a Firefox lover).

I’m talking about Radioactive Buttons!

The folks over at Zurb.com have come up with some pulsating and vibrant buttons that really don’t suck. And I quote: “Using CSS animations in Safari, we’re able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome.”

Zurb’s Radioactive Buttons

As you can tell, you need to be using Safari for the full effect, but they still look pretty decent in other non-Microsoft browsers due to the rocking colors. Hopefully the other browsers will catch up shortly and you’ll be able to add big, shiny, glowing buttons to your landing pages.

The important takeaway from this is that they are created purely with CSS (that means no images to cut up) – so once you’ve followed the instructions on how to code it up you’re good to go. (See the links at the bottom of this post for more details on how to do it).

Keeping the Customers Eye on the Prize

While I wouldn’t advocate using 26 buttons on one page like that example, I do know that being able to draw your customers eye to your most important interaction point is a great way to improve your conversion rate.

Conversion Optimization Tip #29
“Have you tested a Big Orange Button? We call him BOB. He works hard.”

Chris Goward
Wider Funnel

The Power of The Big Orange Button

I think the image at the top of this post speaks for itself. It’s big, juicy and delicious and if it doesn’t make your mouth water just by looking at it, then you’re probably color blind. In which case you might have spent your life thinking there was a fruit called Purple.

According to Wikipedia, Orange represents energy, enthusiasm, and a ‘get-it-done’ attitude. Sounds like a call to action to me.

Get it done. Click.

Want More Awesome CTA’s?

Smashing Magazine has a couple of posts on the subject, including a new and more in-depth article by the guys from Zurb.

Call to Action Buttons: Examples and Best Practices

Pushing Your Buttons With Practical CSS3

Oli Gardner

About Oli Gardner
Co-Founder of Unbounce. Oli has seen more landing pages than anyone on the planet. He is an opinionated writer and international speaker on Conversion Centered Design. You should follow Oli on Twitter
» More blog posts by

Comments:

  1. Investor Boot Camp Online

    Interesting concepts come to mind from this, thanks.

    (0)
    Reply
  2. Nordic Coctails valde Drupal 6 eCommerce av Awave | Might Know Something Else

    […] Georgiska stämningen skapades med WebFonts, ljud (!) och BOB (Big Orange Button). […]

    Reply
  3. 着陆页优化(Landing Page Optimization)101招-第8章测试,测试,测试 | SEM-搜索引擎营销-seo与ppc的博客-ofseo'blog

    […] 56. 按钮颜色 关于按钮颜色有很多种看法。有些人说,红色是最好的颜色,因为能唤起很强烈的情感反应,但是,红色也是一种否定的“禁止”颜色,所以要与其他颜色,如“go”按钮的绿色、作为常见的网络标准链接/行动颜色的蓝色,一起进行测试。Wider Funnel建议用一个大大的橙色按钮。 […]

    Reply
  4. 101 Landing Page Tips | Head Studios - sydney video production, corporate video production, and online video production company

    […] Button color There are many viewpoints out there regarding button color. Some say that red is the best color to use as it evokes such strong emotional reactions, however itʼs also a negative “stop” type color, so be sure to test it with others like green for “go” and blue as a familiar web standard link/action color. Wider Funnelsuggest trying a big orange button. […]

    Reply
  5. What you have to know about conversion optimization - ConversionXL

    […] about the color of the button? Big orange buttons are all the rage these days (think Amazon), but there are still some other colors in the world. In […]

    Reply
  6. What you have to know about conversion optimization | Traindom Blog

    […] about the color of the button? Big orange buttons are all the rage these days (think Amazon), but there are still some other colors in the world. In […]

    Reply
  7. Incoming Marketing Services » How and Why We Run Landing Page Campaigns

    […] Button color There are many viewpoints out there regarding button color. Some say that red is the best color to use as it evokes such strong emotional reactions, however itʼs also a negative “stop” type color, so be sure to test it with others like green for “go” and blue as a familiar web standard link/action color. Wider Funnel suggest trying a big orange button. […]

    Reply
  8. 5 Secrets to Email Marketing Success | Business.com Blog

    […] click orange Call to Action buttons than buttons of other colors? According to Oli Gardner of Unbounce.com, “That BOB – the Big Orange Button – is an overtly clickable button […]

    Reply
  9. Which Color Converts The Best? « Nine Seconds

    […] something of a controversy going around in the interwebs about which button color converts better. Unbounce declared that the future of call-to-action buttons is BOB. That stands for Big Orange […]

    Reply
  10. 101 правило оптимизации интернет магазина | Юрий Кольцов

    […] По поводу цвета единого мнения не существует. Кто-то говорит, что лучший цвет — красный, так как именно он вызывает сильную эмоциональную реакцию, однако он же служит сигналом «Стоп!». Поэтому протестируйте красную кнопку, прежде чем остановить на ней свой выбор. Попробуйте другие цвета: зелёный — «Дорога открыта», синий — стандартный цвет ссылок и интернета. Wider Funnel рекомендует попробовать крупную оранжевую кнопку. […]

    Reply
  11. Правила оптимизации сайта

    […] По поводу цвета единого мнения не существует. Кто-то говорит, что лучший цвет — красный, так как именно он вызывает сильную эмоциональную реакцию, однако он же служит сигналом «Стоп!». Поэтому протестируйте красную кнопку, прежде чем остановить на ней свой выбор. Попробуйте другие цвета: зелёный — «Дорога открыта», синий — стандартный цвет ссылок и интернета. Wider Funnel рекомендует попробовать крупную оранжевую кнопку. […]

    Reply
  12. 5 Examples Of How To Put Your Email Call To Action To Work

    […] is particularly true when it comes to your call to action. On a website, having a big orange button is a powerful way to attract your customers’ attention and get them to click. Although this […]

    Reply
  13. 5 Ways To Put Your Email Call To Action To Work ,Vancouver Island, Canada

    […] is utterly loyal when it comes to your call to action. On a website, carrying a big orange button is a absolute proceed to attract your customers’ courtesy and get them to click. Although this […]

    Reply
  14. 5 Ways To Put Your Email Call To Action To Work | Uk Marketing

    […] is particularly true when it comes to your call to action. On a website, having a big orange button is a powerful way to attract your customers’ attention and get them to click. Although this works […]

    Reply
  15. Mind Over Media

    […] By the way, if you’re still interested in bigger, better buttons, read this article! […]

    Reply
  16. 5 Ways To Put Your Email Call To Action To Work | Runningmail

    […] is particularly true when it comes to your call to action. On a website, having a big orange button is a powerful way to attract your customers’ attention and get them to click. Although this […]

    Reply
  17. Capturing User Attention with Color | EyeQuant Blog

    […] Button) has become a symbol of color’s role in conversion rate optimization. WiderFunnel and Unbounce love to speak about its power, and perhaps rightly so. But why is the BOB the saviour of […]

    Reply
  18. 5 Ways To Put Your Email Call To Action To Work | Antz Interactives Limited

    […] is particularly true when it comes to your call to action. On a website, having a big orange button is a powerful way to attract your customers’ attention and get them to click. Although this […]

    Reply
  19. Bitsy

    On the topic of the Big Orange Button, we wrote a blog post all about how color affects user attention, and what this means for your CRO and branding strategy.

    We also offer a new analysis of the BOB!

    http://blog.eyequant.com/2013/06/27/capturing-user-attention-with-color/

    (0)
    Reply
  20. Good landscaping company website: lead generation example | Marketing My Landscaping

    […] as a good example of lead generation is the contact us button located in the lower-left corner. This button stands out among all the other elements of the web page, serving as a clear call-to-action for […]

    Reply
  21. Which Color Converts The Best? | DougShockley.com

    […] something of a controversy going around in the interwebs about which button color converts better. Unbounce declared that the future of call-to-action buttons is BOB. That stands for Big Orange […]

    Reply
  22. How to Create Conversion-Ready Landing Pages Like a Pro | Articulous.net

    […] sweep aside all the customary babble about orange buttons and things that always boost […]

    Reply
  23. How to optimise everything on your websiteChief Nation

    […] Then again, Unbounce prefer Bob, the Big Orange Button. […]

    Reply
  24. Conversion Rate Optimization for Shopping Carts

    […] Additionally, the button should probably be orange. […]

    Reply
  25. When Conversion Optimization Best Practices Fail

    […] Just make the button bigger! […]

    Reply
  26. Which Color Converts The Best?

    […] something of a controversy going around in the interwebs about which button color converts better. Unbounce declared that the future of call-to-action buttons is BOB. That stands for Big Orange […]

    Reply
  27. The Psychology of Color: How to Use Colors to Increase Conversion Rate

    […] On the other hand, Unbounce boldly declared, after a series of tests, that the future of call-to-action buttons is the Big Orange Button. […]

    Reply
  28. The Psychology behind Calls to Action

    […] warm colors like orange are thought to be best for CTAs, green makes sense for Facebook’s color scheme. They don’t need a harsh, aggressive color like […]

    Reply
  29. 7 Common Pitfalls of Call to Action Design - VWO Blog

    […] color of the button. One of them is the visibility of the button against the background. While the Big Orange Button theory worked well for many, it is not a ‘one solution fits […]

    Reply
  30. 7 Common Pitfalls of Call to Action Design | Profit Maxim Tips&Tricks

    […] color of the button. One of them is the visibility of the button against the background. While the Big Orange Button theory worked well for many, it is not a ‘one solution fits […]

    Reply
  31. 7 Common Pitfalls of Call to Action Design | Dante Godfrey

    […] color of the button. One of them is the visibility of the button against the background. While the Big Orange Button theory worked well for many, it is not a ‘one solution fits […]

    Reply
  32. Significado das cores: qual cor vende e converte melhor?

    […] da chamada “Guerra do botão vermelho vs verde”. A Unbounce declarou num estudo que o futuro dos botões de venda era o BOB (Big Orange Button), ou seja, o botão grande e laranja. Existem vários testes de A/B acerca da […]

    Reply
  33. 101 правило оптимизации интернет магазина | Digital Enthusiast Yury Koltsov

    […] По поводу цвета единого мнения не существует. Кто-то говорит, что лучший цвет — красный, так как именно он вызывает сильную эмоциональную реакцию, однако он же служит сигналом «Стоп!». Поэтому протестируйте красную кнопку, прежде чем остановить на ней свой выбор. Попробуйте другие цвета: зелёный — «Дорога открыта», синий — стандартный цвет ссылок и интернета. Wider Funnel рекомендует попробовать крупную оранжевую кнопку. […]

    Reply
  34. Haverá Uma Cor Certa Para Os Botões de Ação? | Marketing Fácil

    […] Baseado nas teorias que mostram que as cores influenciam a perceção apareceram algumas correntes sobre qual a melhor cor para os botões de chamada para ação. Uma defende que o melhor será o verde pois associamo-lo à confiança e é a cor para avançar no semáforo. Outra defende que será melhor o vermelho devido ao sentimento de urgência e pela capacidade que tem para chamar atenção. Há também quem defenda que no futuro todos os botões de ação vão ser grandes e laranjas. […]

    Reply
  35. How to Decide on the Best Company Colors for Your Startup - The Black Wall Street 1921 Tulsa

    […] To others, it sends a signal of aggression. Once upon a time, digital marketing company Unbounce flatly declared that the big orange button (BOB) works best for conversion. That’s disputed by some people, […]

    Reply
  36. How to Decide on the Best Company Colors for Your Startup-IT大道

    […] To others, it sends a signal of aggression. Once upon a time, digital marketing company Unbounce flatly declared that the big orange button (BOB) works best for conversion. That’s disputed by some people, […]

    Reply
  37. Psicologia das Cores: Como usar Cores para Aumentar sua Taxa de Conversão

    […] Por outro lado, Unbounce ousadamente declarou, após uma série de testes, que o futuro dos botões call-to-action é o botão alaranjado e grande. […]

    Reply
  38. Stop Obsessing Over Button Color | JeremySaid

    […] few years ago, Oli Gardner of Unbounce raved over the rise of the BOB (big orange button). His verdict on the color was […]

    Reply
  39. What are the Best Colors for your Website? - Ignite Visibility

    […] example: the Unbounce conversion-maximizing BOB (Big Orange […]

    Reply
  40. The Right Call-to-Action Button Colours Can Increase Your Click-Through Rate by 21% - Home

    […] it’s the acronym for ‘Big Orange Button’. That title was coined by the optimization pros at Unbounce, who were, in turn, inspired by a tip from Wider Funnel. And their peers over at CrazyEgg have got […]

    Reply
  41. SkinCase

    Been researching a lot on the call to action button colour & design, and feels like the most important thing about it is still how it mix with the overall design of the website, and how well it stands out from the overall design of the website, but still remain as 1 feeling. Make the button stands out, orange is one good colour for button.

    (0)
    Reply
Comments