It's been YEARS! Lets improve the button design.

oxalorg / sakura

:cherry_blossom: a minimal css framework/theme.

https://oxal.org/projects/sakura

MIT License

4.11k stars 182 forks source link

It's been YEARS! Lets improve the button design. #35

Open oxalorg opened 4 years ago

oxalorg commented 4 years ago

I built this aiming simplicity. But the design has become a bit outdated.

Lets spice things up starting with buttons.

meit-shah commented 4 years ago

simondebbarma commented 4 years ago

How can we move forward with this? I'd like to work on this.

I think we should discuss here a little on how you envision the changes should be and we can go back and forth on that @oxalorg.

oxalorg commented 4 years ago

Thanks for the interest @0ww

To be honest on second thought the current buttons look just fine. It's simple and to the point. But maybe there is room for improvement. Do you have any ideas or inspiration? If so we can discuss on it.

Simplicity is important, along with not changing the design tooooo much. So keeping that in mind I think a few small tweaks can give us huge results:

Padding changes: if they're needed
Border Radius: if they're needed - making the buttons a bit softer/rounded but not too much. Something like 2 or 3px.

any other ideas?

NitinNair89 commented 3 years ago

May I share my views?

border-radius: 5px
:hover, :focus effect

..and if SakuraCSS can be made accessible, that would be great!

Accessibility features:

color contrast
focus, tab visual indicator

If SakuraCSS is meant to be used without relying on full-fledged frameworks like Bootstrap of Bulma, then keeping its minimalism intact, few more features could be added.

For example, if I wished to use SakuraCSS for my personal blog, unfortunately I cannot. I always prefer the minimalist approach, but we may need a bit more.

I haven't used SakuraCSS, but I would definitely love to see it bloom further :slightly_smiling_face:

oxalorg commented 3 years ago

That's a great idea. A small border-radius will make it look a bit more modern.

I recently pushed a fix for contrast issues, it will be available in the next release.

unfortunately I cannot ... but we may need a bit more.

Can you expand a little more on that? I'm curious to understand what is preventing you from using sakura on your blog?

This is an example post on my blog with sakura: https://oxal.org/blog/fizzbuzz-in-clojure/

NitinNair89 commented 3 years ago

@oxalorg My blog is on wordpress. It's very heavy - https://www.nitinnairwrites.com/

Most of the features that I actively rely on are:

Ability to show featured post
Carousel
Responsiveness .. etc.

But I would love to have a minimal style that has all these features. It will drastically reduce the page load time. SakuraCSS is light-weight but maybe need more.

I would love to help, not sure how. :slightly_smiling_face:

oxalorg commented 3 years ago

@vkosnar That looks amazing! And yes I'm not very fond of rounded buttons, it works on some brands but for most sharp edges looks cleaner (also 100% agree with that bootstrap feeling haha).

If you want to contribute this as a PR feel free to do it, if not let me know and I'll add this to our next release :)

AnshumanPadiya commented 3 years ago

@oxalorg Hey am new here but, I do have a little suggestion to change the look and feel of the buttons both with some border-radius and little hover animation and onclick animation ( not using JS obvio)