Make things visually clickable 👆
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…)