pokey.css

Let people know a thing is clickable (or non-clickable 🚫) with mouse cursor updates 👆

NPM

npm install --save pokey.css

CDN

See https://unpkg.com/pokey.css/pokey.css

Download

See https://github.com/svinkle/pokey.css/releases

Usage

Sass Import

@import '../node_modules/pokey.css/pokey.css';

HTML (via unpkg)

<link rel="stylesheet" href="https://unpkg.com/pokey.css/pokey.css">

What does it do?

• Adds extra visual affordance to some "clickable" HTML elements via cursor: pointer CSS property
• Adds an added bonus: cursor: not-allowed CSS property on disabled elements

Why?

Why not? Why not add that visual affordance for users to get through an app even faster. Provide the "hand" cursor pointer on things that are clickable in order to get the point across, "Yes, you can click this."

This also come in handy with today’s flat design. People are making transparent buttons with colored borders, essentially link styles with minor affordance of a border. Let's help inform our users and give them a sense of confidence.

“What is this thing? I don’t have time to figure it out, but I do see the little hand here, gonna click!” 🔥

Who stands to benefit? Everyone.

Browser support

• Chrome
• Edge
• Firefox
• Internet Explorer 10+
• Safari 8+
• Opera

Known issues

• Any disabled control with a visible label element will still feature the 👆 on the label (Need that parent selector already…)

Contributing

1. Make a new issue with what you've got to share
2. If it's all good, make a PR
3. Wait for a maintainer to accept and merge 👍

License

This project and its source code is licensed under the MIT license.