Articles Tagged buttons

When I first discovered Material Design, I was particularly inspired by its button component. It uses a ripple effect to give users feedback in a simple, elegant way.

How does this effect work? Material Design’s buttons don’t just sport a neat ripple animation, but the animation also changes position depending on where each button is clicked.… Read article “How to Recreate the Ripple Effect of Material Design Buttons”

A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content or which happens, for example, on one page websites, when infinite scrolling is used, or on mobile devices where different screen sizes can cause the content to scroll extend.

Those buttons usually float in the bottom corner of sites and … Read article “How to Make an Unobtrusive Scroll-to-Top Button”

Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

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”

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”

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”