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
Sass Import
@import '../node_modules/pokey.css/pokey.css';
HTML (via unpkg)
<link rel="stylesheet" href="https://unpkg.com/pokey.css/pokey.css">
- Adds extra visual affordance to some "clickable" HTML elements via
cursor: pointer
CSS property - Adds an added bonus:
cursor: not-allowed
CSS property ondisabled
elements
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.
- Chrome
- Edge
- Firefox
- Internet Explorer 10+
- Safari 8+
- Opera
- Any
disabled
control with a visiblelabel
element will still feature the ๐ on thelabel
(Need that parent selector alreadyโฆ)
- Make a new issue with what you've got to share
- If it's all good, make a PR
- Wait for a maintainer to accept and merge ๐
This project and its source code is licensed under the MIT license.