FanBridge Blog

Your go-to source for smart fan marketing

Team FanBridge

When we announced the new additions to the FanBridge Template Tool, we mentioned how our Buttons module had a significant makeover. To understand how each customization option can alter your buttons’ appearance, we’ll breakdown the elements at play.


So much goes into what makes a button render in the way that it does. This means that you have a lot of control on how this element looks. The parameters we’ll be covering that apply to the button are:

  • Width
  • Radius
  • Border
  • Colors



A button’s width can be determined by the text inside it or by a pre-defined size. On the Template Tool, the default setting for a button is to be sized automatically to adjust to the button’s text. Short text like “Download” will make a short button, long text like “Click Here for a Download of Something You’ll Definitely Want” will make a much longer button. But your button size doesn’t have to be dictated by how long or short the text is. You may want your design to have a uniform button width, and this would be a designation you would make in a Button’s Module Settings. And you can see how these two options differ with automatic width on the top two buttons and a set pixel width on the bottom two buttons.


Button Size



The radius of a button is what manipulates the four corners of a button. Do you want right angle corners? Or do you want a curved edge to your button? To make this, you adjust the radius. And this comes as a pixel setting, so a 0px radius means you are getting squared corners on your button. As you increase the pixel number for radius, your corners become more and more rounded.


Button Radius



Every button most have some kind of width and some designation of radius. But an optional design element you can add is a border. The border around a button will wrap to fit the width and whatever corner style you have. Plus, you can adjust the border width to be any color or thickness.


Buttons Border



With all the elements that go into what makes a single button, your use of color on each element can go a long way how it blends in or stands out. Between the button background, text, and border, you can pull from colors you are using elsewhere in your newsletter for a cohesive look. But this also means you can use colors from out of nowhere and… well then that call to action will really stand out.


Button Colors


Putting It All Together

You’re in control of how buttons in your email newsletter look. And since a button is a great way to get a subscriber to take an action – “Click here to download”, “Click here to purchase tickets”, “Click here to buy a t-shirt” – you’ll want your design to encourage the clicks. Overwhelmed by your options? Go to your website or blog and mimic the settings there for consistent branding. Or try out some alterations from email to email to test which works best.



Popular Categories