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
Unbuttoning Buttons
Shared by
Chris Coyier
Chris Coyier
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 own styles. Hardly a big deal if you ask me, especially since it's extremely likely you'll be styling buttons anyway.
Scott O'Hara has taken a look as well including a couple of interesting other CSS explorations, neither of which stacked … Read article
Adding Particle Effects to DOM Elements with Canvas
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 many kinds of effects.… Read article
Overriding Default Button Styles
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>One challenge is getting all those elements to look and layout exactly the same. We'll cover that a few ways.… Read article
Designing Button States
Shared by
Robin Rendle
Robin Rendle
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 for more functional states early, you can lower the need for costly redesigns as your pattern library matures. Here are the fundamental states you should address early on, in approximate order of importance.
I’ve been spending a lot more time … Read article
CSS Basics: Styling Links Like a Boss
You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That's a link in it's purest form. But what if we want to change things up a bit? Perhaps blue doesn't work with your website's design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.
Building a Good Download… Button?
The semantics inherent in HTML elements tell us what we’re supposed to use them for. Need a heading? You’ll want a heading element. Want a paragraph? Our trusty friend <p></p> is here, loyal as ever. Want a download? Well, you’re going to want... hmm.
What best describes a download? Is it a triggered action, and therefore should be in the domain of the <button></button> element? Or is it a destination, and therefore best described using an <a></a> element?… Read article
A Bit on Buttons
Here's three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme of the button element: never use them outside of forms unless injected with JavaScript.
Making a Pure CSS Play/Pause Button
Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation.
Reportedly introduced in the 1960s by Swedish engineer Philip Olsson the play arrow was first designed to indicate the direction where the tape would go when reading on reel-to-reel tape players. … Read article
Buttons in Design Systems
Shared by
Robin Rendle
Robin Rendle
I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system:
… Read articleI love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.
That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design