Author
Chris Coyier
8 Comments
Join Conversation
A Complete Guide to Links and Buttons
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
Disabled buttons suck
Robin Rendle
In this oldie but goodie, Hampus Sethfors digs into why disabled buttons are troubling for usability reasons and he details one example where this was pretty annoying for him. The same has happened to me recently where I clicked a button that looked like a secondary button and... nothing happened.
Here’s another reason why disabled buttons are bad though:
… Read article “Disabled buttons suck”Disabled buttons usually have call to action words on them, like “Send”, “Order” or “Add friend”. Because of that, they often
Breakout Buttons
Andy covers a technique where a semantic <button></button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a bit. I believe this is better than making the whole dang area a <button></button> because that would sacrifice semantics and likely cause extreme weirdness for … Read article “Breakout Buttons”
Enhancing The Clickable Area Size
Robin Rendle
Here’s a great post by Ahmad Shadeed on making sure that clickable areas in our interfaces are, well, clickable. He writes about making sure that links, buttons and other elements meet accessibility standards for both touch and mouse, too.… Read article “Enhancing The Clickable Area Size”
Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges
In this week's roundup, the string length of two emojis is not always equal, something to consider before making that rounded button, and we may have a new way to share web apps between devices, even when they are offline.… Read article “Weekly Platform News: Emoji String Length, Issues with Rounded Buttons, Bundled Exchanges”
Ghost Buttons with Directional Awareness in CSS
It would surprise me if you'd never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction … Read article “Ghost Buttons with Directional Awareness in CSS”
Recreating Netlify’s Neat-o Sliding Button Effect
Have you seen Netlify's press page? It's one of those places where you can snag a download of the company's logo. I was looking for it this morning because I needed the logo to use as a featured image for a post here on CSS-Tricks.
Well, I noticed they have these pretty looking buttons to download the logo. They're small and sharp. They grab attention but aren't in the way.
They're also interactive! Look at the way they expand and … Read article “Recreating Netlify’s Neat-o Sliding Button Effect”
Nested Gradients with background-clip
I can't say I use background-clip all that often. I'd wager it's hardly ever used in day-to-day CSS work. But I was reminded of it in a post by Stefan Judis, which coincidentally was itself a learning-response post to a post over here by Ana Tudor.
Here's a quick explanation.… Read article “Nested Gradients with background-clip”
Apple Pay Buttons in CSS
You don't have to design your own buttons for Apple Pay. In fact, Apple literally tells you that you can't. So, what are you to do on the web? Thankfully, Apple has provided a way. It's kinda weird and involves a bunch of proprietary CSS properties and values, but whattyagonnado.
They have documentation for all of this but I'll port it here so you can see actual demos. … Read article “Apple Pay Buttons in CSS”
The ineffectiveness of lonely icons
Chris Coyier
Icons are great and all, but as we've been shown time and time again, they often don't do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.… Read article “The ineffectiveness of lonely icons”