Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
Components
Want to build websites in no-time? Announcing the new Framer Beta.Learn more
Framer
  • Teams
  • Showcase
  • Developers
  • Resources
    • Tutorials
    • Examples
    • Components
    • Templates
    • Sessions
    • Support
    • Updates
  • Blog
  • Pricing
  • ···
    • Blog
    • Pricing
Components
Interface
  • Button
  • Checkbox
  • Conic
  • Cursors
  • Input
  • Radio Buttons
  • Segmented Control
  • Select
  • Slider
  • Toggle
Media
  • Audio
  • Avatar
  • GIF
  • Lottie
  • Spotify
  • Video
  • Webcam
  • YouTube
Utility
  • Loading Indicator
  • Progress Bar
  • Rating
  • Sticky Note
  • Time & Date
Graphics
  • Feather
  • Hero
  • Humaaans
  • Iconoir
  • Material
  • Memoji
  • Phosphor
  • Twemoji

Button

A fully functioning button with customizable pressed and hover states.

Overview

Add interactive buttons with built-in hover and pressed states. Customize everything from the style to the action state animations.

Properties

The Button component has fifteen different properties. You can customize the text inside your button with the Text, Text Align, Font, Text Color, and Font Size properties. To customize the button style you can use the Shadow, Disabled, Variant, Bg color, Padding, Radius, Hover Scale, Tap Scale, Scale Animation, and Hover Animation properties.

Every component at your fingertips.

Did you know all of these components are accessible from the Insert Menu right inside of Framer?

Learn more

Framer

  • Teams
  • Pricing
  • Showcasenew
  • Blog
  • Developers
  • Updates

Platforms

  • Web
  • macOS
  • Windows
  • iOS
  • Android

Learn

  • Tutorials
  • Examples
  • Templates
  • Sessions

Resources

  • Components
  • Input Kit
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement