3 Ways to Make Buttons more Enticing to Interact With

Buttons are one of the most common elements in all of UI. It’ll probably be the first thing you see when you open up a new component library or start working on a new project.

They can be surprisingly complex when you factor in all the different state…


This content originally appeared on DEV Community and was authored by Kyle Gill

Buttons are one of the most common elements in all of UI. It'll probably be the first thing you see when you open up a new component library or start working on a new project.

They can be surprisingly complex when you factor in all the different states and implications a button can have when pressed, clicked, or tapped.

Think about these differnt states you need to consider when designing a button:

  • Full color, outlined, or "ghost" buttons
  • Loading, disabled, and submitting states
  • Button sizes like sm, md, and lg
  • Hover, focus, and active states
  • Buttons used as links, vs buttons used as... well, buttons

After all is said and done, you can still do more to make sure your button looks "clickable". Here are a couple ways you can enhance a button.

Techniques for making buttons look more "clickable"

  1. Overlap content sections

  2. Add animations

  3. Add cursor: pointer

1. Overlap content sections

An element that sits on top of 2 sections looks like it almost "floats", and looks like it could be clicked.

Alt Text
Material UI does this with their + buttons.

2. Add animations

Entrance animations, hover animations, and tap animations can all add to a button in subtle but important ways.

Consider scaling the button or text within it when you hover or click.

3. Add cursor: pointer

It makes a button obviously clickable to have a little finger pop up over a button! Consider adding it to something you know will be clicked.

You can't rely on this to signal a button is clickable though for users who navigate without a cursor.


? 3 ways to make your button more enticing to click

1️⃣ Overlap content sections
2️⃣ Add animations
3️⃣ Add cursor: pointer#uifoundations pic.twitter.com/Q47GPEKvk6

— Kyle Gill (@gill_kyle) July 30, 2021


This content originally appeared on DEV Community and was authored by Kyle Gill


Print Share Comment Cite Upload Translate Updates
APA

Kyle Gill | Sciencx (2021-07-30T18:49:53+00:00) 3 Ways to Make Buttons more Enticing to Interact With. Retrieved from https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/

MLA
" » 3 Ways to Make Buttons more Enticing to Interact With." Kyle Gill | Sciencx - Friday July 30, 2021, https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/
HARVARD
Kyle Gill | Sciencx Friday July 30, 2021 » 3 Ways to Make Buttons more Enticing to Interact With., viewed ,<https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/>
VANCOUVER
Kyle Gill | Sciencx - » 3 Ways to Make Buttons more Enticing to Interact With. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/
CHICAGO
" » 3 Ways to Make Buttons more Enticing to Interact With." Kyle Gill | Sciencx - Accessed . https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/
IEEE
" » 3 Ways to Make Buttons more Enticing to Interact With." Kyle Gill | Sciencx [Online]. Available: https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/. [Accessed: ]
rf:citation
» 3 Ways to Make Buttons more Enticing to Interact With | Kyle Gill | Sciencx | https://www.scien.cx/2021/07/30/3-ways-to-make-buttons-more-enticing-to-interact-with/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts