What are Call to Action buttons?
Call to Action buttons help draw the user's eye to a link by providing a standardized button. Providing calls to action are a key component of designing your site's user journey, helping visitors find next steps and keeping them on your site. With very few exceptions, all pages will need at least one call to action of some sort, and a Call to Action button is designed specifically to make that easy.
Examples of Call to Action Buttons
Please note that the buttons provided below as examples do not link to anywhere other than back to this page. This is intentional for the purpose of this page. Hopefully it is self-evident that normally buttons should actually lead to a distinct destination.
Call to Action Buttons at 100% Width
A Call to Action button's height is determined by the amount of text given for the button. However, it's width is determined by the width of the column it is placed into. This can play a key role in designing your page and where you want your calls to action located.
Buttons at 100% width are extremely bold, and are best used for the primary purpose of a page, such as for registration links or similar.
Customizing with Icons
You have the option when making a Call to Action button to add an icon from your site's icon library. This can let you differentiate between buttons that are located close together.
Wider Buttons Hold Text Better
The length of the text you put on a button will increase the height of it. This can cause some buttons to look very awkward, when they expand much longer than their fellows. Shorter buttons are usually more impactful and action-focused. When placed at 70%, buttons are still very wide and can hold a decent amount of text.
Narrow Buttons; Long Text
Compare the button below to the previous one. It has the same text, but has ended up much taller because it is in a 30% width space.