It’s difficult for users to actually do the action you want them to perform when your buttons look like text. I’m not exactly sure why designers have pivoted towards removing all stylings that regular users have come to expect from button elements, but it’s plaguing far too many websites.
Buttons should be eye-catching, colorful, fun to interact with, and support all proper CSS states. Clients and agencies will tend to push for “cleaner” buttons - which most of the time refers to setting the buttons as simple underlined text items. Do not be brainwashed into thinking this is better:
You tell me what looks more interactive…
Designers should rarely rebuild the browser structure for web form elements in their projects. I should clarify - I’m not suggesting that you use the barebones default styles provided by the browser, I’m saying that you shouldn’t hide the elements themselves just to replace them with mimicking components. I find this practice is becoming more and more noticeable with the growing popularity of component-based frameworks. Don’t fall into these bad design habits.
For example, you should leave the following
select element as is:
<select> <option> </select>
Instead of doing something like this:
<select style="display:none;"></select> <div class="custom-select-container"> <span>Option</span> </div>
There are cleaner ways to customize web forms with straightforward CSS. Have a look at my own open source project Normform if you’d prefer to just use a lightweight plugin to do this for you. (Shameless plug, I know)
Having a boring or lazy design thought-process doesn’t mean you should develop ugly UI for the sake of “simple”. Too often that word is associated with “minimalism” or “less content” and that is only half true.
The experience is what needs to be simple for your users - the UI itself should still be beautiful.
← Back to all articles
If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.
This page is valid HTML