---
title: "Striped CTA Button — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Akshay M · Buttons. A bold CTA that reveals dynamic stripes"
canonical: "https://framer.elliotli.dev/component/striped-cta-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Striped CTA Button

# Striped CTA Button

A bold CTA that reveals dynamic stripes

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

![Striped CTA Button preview image 1](https://framer.elliotli.dev/og/component/striped-cta-button/1893bef0e31d59aa/1600x1200.jpg)

## Summary

A bold CTA that reveals dynamic stripes

## Description

On hover, the button transforms into a **vibrant green striped background**, creating a sense of motion and urgency while maintaining a clean structure. The directional arrow reinforces user intent, making clicks feel natural and guided.

Perfect for modern SaaS and product websites where **micro-interactions drive conversions**.

## 🚀 Key Features

-   **Striped Hover Animation**
    
    -   Smooth transition to a striped green background
        
    -   Adds motion without overwhelming the UI
        
-   **Dual-State Design**
    
    -   Default: Clean, minimal CTA
        
    -   Hover: High-energy, attention-grabbing state
        
-   **Directional Action Cue**
    
    -   Arrow icon enhances clarity and flow
        
    -   Encourages forward movement
        
-   **High Contrast UI**
    
    -   Black → Green transition for strong visibility
        
    -   Optimized for conversion-focused layouts
        
-   **Fully Customizable**
    
    -   Change stripe style, colors, spacing, radius
        
    -   Adaptable to any brand system
        

## 🎯 Perfect For

-   SaaS landing pages
    
-   Product hero sections
    
-   Marketing funnels
    
-   Startup websites
    
-   Conversion-focused UI
    

## 💡 Why This Component?

Most buttons only change color.

This one **changes energy**.

The striped animation:

-   Creates visual movement
    
-   Signals interactivity instantly
    
-   Increases click attention
    

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

-   All · #10561

## Details

- **Author**: Akshay M
- **Price**: $5.00
- **Published**: 2026-05-07
- **Updated**: 2026-05-07
- **Added**: 2026-04-18
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything