Based on the Atomic design methodology, a call to action (CTA) button is one of the smallest and most fundamental building blocks of a user interface. It guides users toward a desired action, whether it’s signing up for a newsletter, making a purchase or downloading a resource.
By providing clear, actionable prompts, an effective CTA button design helps increase user engagement and drive conversions, so visitors can easily navigate through the desired steps to achieve their goals. On the other hand, a weak call to action can lead to missed opportunities and lost conversions, leaving your potential audience confused or uninterested.
In this blog post, I’ll walk you through the design process using Figma. I’ll cover the best practices for CTA buttons — from creating the proper shape and choosing the right color to A/B button testing — to ensure you drive the results you want.
Here are seven CTA button design guidelines to consider when designing a website on Figma:
1. Create a CTA shape
The first basic element of the call to action button is its shape. Select the Rectangle tool from the toolbar on the left (or press R). Click and drag on the canvas to create a rectangle. This will be the base shape of your button.
Size
Resize the rectangle to the desired dimensions for your button. In the right-hand properties panel, find the Size setting.
Typically, buttons should be large enough to be easily clickable, with a width that accommodates your text and some padding on either side. A height of 48 pixels is often considered optimal for touch devices, providing enough space for comfortable interaction.
Corners
If you want your button to have rounded corners, select the rectangle. In the right-hand properties panel, find the Corner radius setting. Adjust the value to round the corners of your rectangle.
Here are my favorite tips on how to choose the right type of corners for CTA:
- Sharp corners (0px radius): Often used in more corporate or technical designs, where a sharp, no-nonsense look is preferred. Convey a sense of stability and seriousness.
- Rounded corners (4-8px radius): Used in various applications due to their versatile and friendly appearance. Provide a modern look that is approachable and professional.
- Fully rounded corners (50% or maximum radius): Often seen in mobile apps and modern web designs, providing a very friendly and approachable look. Convey approachability, friendliness and modernity.
Here’s the basic shape result you can get in Figma with fully rounded corners:
2. Pick a color that converts
Adding a background color to a button makes it more visually outstanding. Click on the rectangle you just created to select it. Look at the properties panel on the right side of the screen. Under the Fill section, you will see a color swatch. You can choose a color by clicking on the color spectrum, entering a HEX code or using the sliders to adjust the hue, saturation and brightness.
To add an outline (stroke) color to a button in Figma, enable the Stroke option in the properties panel by clicking the + icon. In the Stroke section, you can also adjust the width of the stroke by entering a value or using the slider. Typically, a stroke width of 1-3 pixels works well for buttons, but you can adjust it based on your CTA design needs.
Choosing the right color for a CTA button impacts user engagement and conversion rates. This design process involves:
- Contrast: Ensure the CTA button color contrasts sharply with the background to make it easily noticeable.
- Consistency: Use colors that align with your brand identity to maintain a cohesive look and feel across your website.
- Emotion: Choose colors that evoke the desired emotional response, such as red for urgency or green for trust.
- Readability: Ensure the text on the button is legible against the button color, often requiring a contrasting text color.
Unlock engagement: Discover the top 10 best call-to-action colors that drive clicks
Here is what my button looks like after adding our brand color:
🎨 Find out the top 10 colors that make people buy.
3. Make sure the text is actionable and readable
The next important CTA element is the text itself. Choose the Text tool (T) from the toolbar or press T on your keyboard. Click inside the button shape where you want the text to appear and type it.
Copy
When writing the text, follow these best practices for CTA buttons:
- Clarity: Make sure the text clearly conveys the action you want the user to take, such as “Sign up” or “Buy now.”
- Brevity: Keep it short and to the point, typically no more than 2-3 words to ensure immediate understanding.
- Action-oriented: Use strong, action-oriented verbs that prompt immediate action like “Get,” “Start” or “Download.”
- Urgency: Create a sense of urgency or exclusivity when appropriate, using words like “Now,” “Today” or “Limited.”
- Consistency: Match the tone and style of the text with your overall brand voice to maintain a cohesive user experience.
Font, size and weight
With the text selected, go to the properties panel on the right side of the screen. Adjust the font, size, weight and color to match your design. You might choose a bold font to make the text pop.
For improved readability, keep in mind:.
- The font size should be large enough to be easily legible, even at a glance, typically ranging between 14 to 18 pixels. This ensures that the text grabs the user’s attention without overwhelming the design. It’s also important to maintain a balance where the text is prominent but harmonious with the overall layout.
- Sans-serif fonts are often preferred for CTA buttons due to their clean and modern appearance, which enhances readability. It’s important to use a font that aligns with your company’s brand book, maintaining consistency across your website.
In case you want to choose a new font, follow our typography guide.
Alignment and padding
Center alignment is commonly in CTA button design as it draws the user’s focus directly to the action point, creating a balanced and harmonious layout. However, alignment can vary based on design context and layout requirements.
For center alignment, select both the button rectangle and text. Use the alignment tools at the top of the right-side toolbar to center the text horizontally and vertically within the button.
Padding refers to the space inside the button between the text and the button edges. The perfect padding amount should be proportional to the button’s size and font size. A larger button needs more padding than a smaller one. Use padding equal to twice the size of the font used within the button for a comfortable and balanced look.
Text color
Choose the text color of a CTA button carefully to ensure maximum readability and visibility. Contrast is key. The text should stand out prominently against the button’s background color to make it easily readable. For example, pairing a white text color with a dark background or a black text color with a light background often works well.
Here’s what our CTA button looks like after adding text:
4. Add descriptive icon
Choose an icon that best represents the action or function associated with your CTA button. You can easily import icons into Figma in SVG or PNG format by dragging and dropping them directly into your file.
After importing an icon, resize it to fit appropriately within your CTA button. You can do this by clicking and dragging the handles around the icon. Then align the icon with the text of the button to ensure visual coherence. You can use Figma’s alignment tools.
Icons should be used in CTA buttons when they provide clarity or add context to the action. For example, a shopping cart icon in a “Buy now” button states that clicking the button will add items to the cart. Similarly, a magnifying glass icon in a “Search” button communicates that clicking it will initiate a search action.
I added an icon to our CTA button example to highlight the downloading process:
5. Improve UX with button states
When designing a button, don’t forget to design its states. Button states are various visual representations of a button in different stages of interaction, such as default, hover, focus, pressed and disabled. They play a crucial role in enhancing the user experience (UX) by providing clear feedback and guiding users through their interactions with the interface.
Here’s a breakdown of different button states:
- Default: This is the normal appearance of the button when it is not being interacted with.
- Hover: When a user moves the cursor over a button, the hover state provides visual feedback that the button is interactive. This change can be a slight color shift, a border highlight or an increase in shadow, indicating that the button is ready to be clicked.
- Focus: This state occurs when a button is selected using keyboard navigation or other non-mouse interactions. It is often indicated by a distinct border or outline, helping users who navigate via keyboard or assistive technologies understand which element is currently selected.
- Pressed: This state appears when the button is clicked. It gives immediate feedback that the user’s action is being recognized. Often, this state is represented by a color change, a pressed effect or a slight animation.
- Disabled: A disabled button indicates that an action is currently unavailable. It typically appears faded or grayed out, signaling to users that they cannot interact with it at the moment. This helps manage user expectations and prevents frustration.
This is how our CTA button looks like in different states:
6. Make sure the button stands out
Now that we’ve created our button, how can we ensure users will notice and click it? Here are my tips:
- Use contrasting colors: Choose a button color that contrasts sharply with the background. This makes the button more visible.
- Position the button strategically: Place buttons in prominent positions where they are easy to find. Common areas include above the fold, near relevant content or at the end of a logical flow inside the website sections. Additionally, consider using sticky elements to keep essential buttons accessible as users scroll through the page.
- Maintain adequate white space: Ensure there is sufficient white space around your button to prevent it from feeling cluttered or overwhelming. White space helps the button stand out and provides a clear visual break from other content, making it more noticeable.
- Don’t overwhelm the user with too many buttons: Limit the number of buttons on a single page to avoid overwhelming users. Focus on the most important actions you want users to take and prioritize those buttons. Too many buttons can dilute the impact of each one and confuse the user about which action to take.
7. Don’t forget to A/B test your CTAs
A/B testing is a method of comparing two versions of a webpage or a specific element (in our case button) to determine which one performs better in terms of user engagement and conversions. Conducting A/B testing for buttons is important because even small changes in call to action button design, text, color or placement can impact user behavior and overall conversion rates.
How to conduct A/B testing for CTA buttons
- Define your goals: Determine what you want to achieve with your A/B test. This will help you to measure testing results.
- Identify variables to test: Choose specific elements of your button to test, such as:
- Text: Testing different wording like “Buy Now” vs “Shop Now”
- Color: Comparing different color schemes
- Size: Testing larger vs smaller buttons
- Placement: Moving the button to different locations on the page
- Create variations: Design two (or more) versions of your button. One will be the control (current version) and the others will be variations with changes to the identified variables.
- Segment your audience: Randomly divide your audience into groups to ensure each variation is shown to a similar number of users under similar conditions.
- Run the test: Implement the test and run it for a sufficient period to gather meaningful data. Ensure the test runs long enough to reach statistical significance.
- Analyze results: Compare the performance of each variation. Look at metrics such as click-through rates, conversion rates and engagement levels to determine which version performed better.
- Implement the best version: Once you have identified the winning variation, implement it as the new standard on your website.
- Iterate and repeat: A/B testing is an ongoing process. Continuously test new variations and improvements to keep optimizing your buttons and overall user experience.
🎁 Cool CTA button designs
Now that you’ve learned how to design a CTA button in Figma, let me show you some of the best CTA button design examples. I hope they might inspire you to experiment and make your website more memorable and attractive.
-
- Use arrows to guide the user’s attention as Demostack did here:
-
- Add descriptive icons so users can understand their desired action without even reading, similar to how Box does it:
-
- Experiment with size, shape and color like Videoask:
-
- Add fun animation for a clicked button:
Get the best call to action button designs with Productive Shop
By following my CTA button best practices, you can create calls to action that not only look great but also drive the desired actions from your audience. From choosing the right shape and color to ensuring optimal text and alignment, each element plays a crucial role in making your CTA button irresistible and effective.
If you need personalized assistance to ensure your CTA buttons are designed to perfection and seamlessly align with your brand identity, Productive Shop is here to help. Our team of experienced designers specializes in web design and branding services tailored to your unique business goals.
Reach out to us and let’s create something extraordinary together