---
title: "ASCII Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About ASCII Button is a bold pill-shaped CTA button that uses ASCII-rendered images as its background."
canonical: "https://framer.elliotli.dev/component/ascii-button"
---

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

# ASCII Button

A pill button with an ASCII-render

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

![ASCII Button preview image 1](https://framer.elliotli.dev/og/component/ascii-button/8a6b5c6b7e613515/1600x1200.jpg)

## Summary

About ASCII Button is a bold pill-shaped CTA button that uses ASCII-rendered images as its background.

## Description

**About**

**ASCII Button** is a bold pill-shaped CTA button that uses ASCII-rendered images as its background. At rest it shows a dim, moody version of the image. On hover, it swaps to a bright high-contrast version creating a glowing reveal effect that feels raw, glitchy, and intentional.

**What it does**

On hover, the button background switches from a low-brightness ASCII image to a high-brightness one using Framer's built-in variant transition. The result is a smooth brightness reveal that feels like the button is lighting up from within no code, no plugins needed at runtime.

**What you can customize**

From the Framer panel: button text, text color, and border radius.

**How to set up the images**

The button comes with two variant states, Default and Hover. Each state has its own background image slot. To customize:

1\. Select the button on the canvas and make sure you are on the Default variant

2\. Click on the image in the panel, then go to Plugins and open the ASCII plugin

3\. Apply it to your image and bring the Brightness down (around 20–40%) — this is your resting state

4\. Switch to the Hover variant from the variant switcher

5\. Add the same image again through the ASCII plugin, this time with Brightness turned up high (80–100%) — this is your hover reveal

That is it. Framer handles the transition automatically.

**Great for (examples)**

Use it anywhere you want a button that feels more expressive and textured:

\* hero sections on dark or editorial layouts

\* portfolio and creative studio sites

\* brutalist and glitch-aesthetic pages

\* product and launch pages

\* SaaS websites with bold visual identity

\* personal brand sites

\* Framer template previews

**Share your build**

If you ship something cool with it, post it on X and tag me [@karimsaif0](https://x.com/karimsaif0), or send it over. I would love to see what you create.

**Need help?**

Questions or feedback? Reach me anytime: [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com) or on X [@karimsaif0.](https://x.com/karimsaif0)

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

-   All · #4910

## Details

- **Author**: Karim Saif
- **Published**: 2026-06-29
- **Updated**: 2026-06-29
- **Added**: 2026-06-29
- **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