---
title: "Marker Button — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Roman Salakhov · Buttons. Marker Button is a lightweight animated button inspired by marker highlights and hand-drawn motion graphics."
canonical: "https://framer.elliotli.dev/component/marker-button"
---

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

# Marker Button

Marker-style hover reveal animatio

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

![Marker Button preview image 1](https://framer.elliotli.dev/og/component/marker-button/a6d854ddc56e3d87/1600x1200.jpg)

## Summary

Marker Button is a lightweight animated button inspired by marker highlights and hand-drawn motion graphics.

## Description

## Marker Button is a lightweight animated button inspired by marker highlights and hand-drawn motion graphics.

On hover, a fluid marker stroke reveals itself behind the text, creating a natural handwritten accent that feels expressive without distracting from the interface. The label color transitions smoothly while the animated stroke expands across the button, adding personality and motion to any design.

Built entirely with Framer Motion, the component is responsive, easy to customize, and optimized for modern websites, portfolios, landing pages, and creative projects.

### Features:

-   Animated marker-style stroke reveal
    
-   Smooth text color transition on hover
    
-   Fully customizable colors and typography
    
-   Adjustable marker stroke thickness
    
-   Custom padding and border radius controls
    
-   Optional full-width layout
    
-   Responsive and lightweight implementation
    
-   No external dependencies
    

### Part of the Hyper Buttons collection by Folga Digital.

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

-   All · #4924

## Details

- **Author**: Roman Salakhov
- **Price**: $4.00
- **Published**: 2026-06-24
- **Updated**: 2026-06-26
- **Added**: 2026-06-24
- **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