How to make a button seem more like a button?
I have a navbar with a hamburger here: https://thinking-boats.pages.dev/playground/
From the feedback that I have got from non-devs, the initial "close" svg doesnt seem like a button. How do I fix that?
The first idea was a sort of clipping circle in the svg? Not sure how to add that..
Thinking Boats ⛵
Thinking Boats ⛵ - title
12 Replies
you can add a light background with a box shadow on the container button. I also added a scale transform on hover and some padding on the nav but you get the idea.
unless this will clash with the design you're going for or you absolutely can't do anything with button but want the svg itself to look like button
You could and should put the svg inside the button so that’s an interactive element that assist tech can reach. It should also have an aria-label since it’s an icon button so that you can communicate to screen readers what it does (opens the menu) and then use aria-hidden to hide the svg. I personally really like font libraries (like font-awesome as an example although I don’t prefer their icons ) because it simplifies the markup and you can use font properties on the icon to change the colour and size. But I’m also not great with svgs so it’s a tradeoff of loading through a cdn or style sheet instead of an inline svg or sprite
I was looking for something a tad bit less... intrusive? But yes, that works. I get your point
Had me confused for a second there.. yes, I do have those already. Just that visually, its not obvious that the "close" word is a "button", immediately
Oh the word close is the svg ? My mistake I thought you were referring to an icon like the X since you had the hamburger icon . The X is pretty standard versus the word “close”
Is there a reason you didn’t want to use an X icon ?
Or even a “Close Menu X ” to be very specific and use C icon in conjunction since users are already used to associating that with closing ?
You could do something like the first example on this page.. an animation into an X : https://www.sliderrevolution.com/resources/css-hamburger-menu/
Slider Revolution
Cool CSS Hamburger Menus and Their Animations
CSS Hamburger menu icons are a great design concept that save space. It is a very common element for mobile website development.
not really, apart from that I spent a long time tweaking it to write that word haha.
Is it on purpose that the white background isn't inside the black border?
yes it is- it's a slightly offset
::after
Wait, is Cloudflare automatically building on push? I did not manually deploy that change
Well hopefully its a bit more obvious now? I do want it to look fancy as wellIf you push to main it rebuilds in cloudflare, yes
You should make the grey background larger than the text though
Here are some guidelines about designing buttons: https://app.uxcel.com/courses/ui-components-n-patterns/anatomy-iii-298
Uxcel
Best Practices for Designing UI Buttons Lesson | Uxcel
When designing any kind of digital product that asks users to take any action, buttons are an invaluable part of the designer's toolkit. Whether using button...
The font isn't that readable. Also, using two different font faces like that isn't recommended
It also just feels a bit weird that the button changes from an icon to a text button
off-top:
but what an awesome resource. I'm a Frontend Dev, and I run quickly through it. It's an amazing resource!