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.…
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.…
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. …
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 …
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 …
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 …
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 …
We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you’re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your …
Let’s take a look at how to make web pages more visually capable by combining the freedom of <canvas></canvas> with HTML elements. Specifically, we will be creating a basic HTML-to-particle effect, but the same technique could be used for …
There are a variety of “buttons” in HTML. You’ve got:
<button>Button</button>
<input type="button" value="Button"/>Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site
<a href="#0" class="button">Button</a>Tyler Sticka on the complexity of designing buttons and making sure that we’ve taken into consideration focus, hover and active states during the design process:
…In truth, mouse effects are probably the least important state to design for. By accounting
