Skip to content
CTAs

Edit the size of a button CTA

Last updated: October 27, 2022

Applies to:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

Adjust the size of your button CTA using the built-in sizing options and custom CSS. When uploading your image for an image CTA, you may want to take into account retina optimization.

To further customize your button CTA, learn how to add custom styles to your CTA with CSS. If you're adding your button CTA to an email or template, learn how to center your CTA.

Edit your CTA size 

You can manually adjust the size of your button CTA or use custom CSS to automatically fill width of the button CTA's container or module. If you are embedding an image CTA on your non-HubSpot site, you may need to apply additional CSS declarations (such as width: 100%;) within your stylesheet to make the image CTA responsive.

To edit the size of your button CTA: 
  • In your HubSpot account, navigate to Marketing > Lead Capture > Button CTAs.
  • Hover over a button CTA and click the Actions > Edit.
  • In the slide-in panel, click Advanced options.
  • To manually resize your custom button CTA:
    • Clear the Fit to text checkbox. This will remove the automatic resizing applied.
    • In the Button padding section, enter your size values for the button width and button height fields. 
    • Click Next >
    • Click Save. Then, click Finish
  • To have your custom button CTA fill the entire width of its container or module:
    • Clear the Size automatically checkbox. 
    • In the Custom CSS field, enter your custom CSS.
    • Set the width to width: 100%;
    • Click Next >
    • Click Save. Then, click Finish

 

What is retina optimization?

Retina optimization makes your button CTA's image more crisp when viewed on your site pages and in emails if your recipients view the CTA in modern versions of Apple Mail and iOS mail; this is not supported by Outlook or webmail services like Gmail.  

Retina optimization is supported when you upload an image that is at least two times the size necessary for the button CTA, similarly to how retina support works for all images across the internet. Please also note the following: 

  • If you're creating a CTA that will be 400px by 100px, the uploaded image would need to be 800px by 200px to support an @2x pixel density display.
  • CTAs support adding up to a 4x version. For example, if you're creating a CTA that will be 400px by 100px, you can uploading a 1600px by 400px image.
  • The CTA will automatically be rendered on your website with a srcset attribute serving the 1x, 2x, 3x and 4x version where available.
  • If the image is uploaded at the size the CTA will be rendered at, it will not have retina support. For example, if a 400px by 100px image is uploaded for a 400px by 100px CTA
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.