Search

Nalezeno "buttons": 15

How to Recreate the Ripple Effect of Material Design 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...

How to Make an Unobtrusive Scroll-to-Top Button


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...

Using a brightness() filter to generically highlight content


Rick Strahl: I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course,...

Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects


I was reading Anna Kaley’s “Listboxes vs. Dropdown Lists” post the other day. It’s a fairly straightforward comparison between different UI implementations of selecting options. There is lots of good advice there. Classics like that you should use radio buttons (single...

A Complete Guide to Links and Buttons


Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript. The post A Complete Guide to Links and Buttons appeared first on CSS-Tricks

Custom Styling Form Inputs With Modern CSS Features


It’s entirely possible to build custom checkboxes, radio buttons, and toggle switches these days, while staying semantic and accessible. We don’t even need a single line of JavaScript or extra HTML elements! It’s actually gotten easier lately than it has been in the past. Let’s take a look. Here’s...

Disabled buttons suck


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....

4 Noncustodial Bitcoin Cash-Powered Payment Button Generators


Bitcoin cash development is popping, whether it’s from engineers programming infrastructure or developers creating third-party resources. One innovative concept is the use of embeddable payment buttons that allow people to tip and donate using BCH payments. Just recently, a new BCH-based...

Breakout Buttons


Andy covers a technique where a semantic <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...

Enhancing The Clickable Area Size


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. I particularly like the section where Ahmad writes about...

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...

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...

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 consistently was itself a learning-response post to a post over here by Ana Tudor. Here's a quick explanation. You've probably seen...

The ineffectiveness of lonely icons


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...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace