---
title: "SmartCtaRow — Free Framer component · Best of Framer"
description: "Free Framer component · by Spyridon Merkouris · Buttons. What it does SmartCtaRow gives your Framer site a polished row of CTA buttons that automatically styles each action based on its importance."
canonical: "https://framer.elliotli.dev/component/smartctarow"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/SmartCtaRow

# SmartCtaRow

Smart CTA button row for Framer

[View on Framer](https://framer.com/marketplace/components/smartctarow/?via=elliot-li)

![SmartCtaRow preview image 1](https://framer.elliotli.dev/og/component/smartctarow/441d90df080ff302/1600x1200.jpg)

## Summary

What it does SmartCtaRow gives your Framer site a polished row of CTA buttons that automatically styles each action based on its importance.

## Description

### What it does

**SmartCtaRow** gives your Framer site a polished row of CTA buttons that automatically styles each action based on its importance. Mark a CTA as primary, secondary, or tertiary, and the component adjusts its size, weight, fill, border, hover behavior, and visual emphasis. It is built for hero sections, pricing cards, landing pages, feature blocks, and any section that needs multiple clear calls to action.

### Features

Supports a list of editable CTAs with ID, label, link, importance, and optional icon. Primary CTAs receive larger sizing, stronger font weight, solid or gradient fill, shadow, and more visual emphasis. Secondary CTAs can use outline or ghost styling. Tertiary CTAs appear lighter and less dominant. Hover effects include sliding background fill, lift animation, shadow change, and icon shift. Primary and secondary colors are configurable, and the component automatically calculates readable contrast text for filled buttons. Layout can be horizontal or stacked. On mobile, buttons can automatically stack vertically and become full width. Links are sanitized to allow safe http, https, mailto, tel, anchor, and relative URLs. Unsafe links are prevented from navigating. Uses real anchor tags when an href is provided and real button elements when no href is set. Includes visible focus-visible styling and respects reduced-motion preferences.

### How to use

Add **SmartCtaRow** to your Framer canvas and create your CTA list in the property panel. Add labels, links, icons, and importance levels for each action. Set one CTA as **Primary** for the main conversion path, then use **Secondary** or **Tertiary**for supporting actions like “Learn More,” “View Demo,” or “Contact Sales.” Choose row or stacked layout, adjust the gap, pick solid or gradient primary styling, choose outline or ghost secondary styling, and set your primary, secondary, and text colors.

### Ideal for

Hero sections, SaaS landing pages, pricing cards, product cards, feature sections, app launch pages, waitlist pages, agency websites, template previews, newsletter CTAs, download sections, onboarding pages, and any Framer project that needs a clean multi-button CTA group with clear visual hierarchy.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6730

## Details

- **Author**: Spyridon Merkouris
- **Published**: 2026-05-04
- **Updated**: 2026-05-04
- **Added**: 2026-05-03
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow