Kro/btn styling - Githubissues

teacherfund / TeacherFund_next

A website to fund teachers discretionary spending because the government sucks at it

https://theteacherfund.com

MIT License

90 stars 87 forks source link

Kro/btn styling #149

Closed ghost closed 5 years ago

ghost commented 5 years ago

addresses button styling in #147

@joelwass @meowwwls let me know about these button styling changes. Just trying out a few things with hovering, can be changed if you think they are too much.

vercel[bot] commented 5 years ago

This pull request is being automatically deployed with ZEIT Now (learn more). To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/teacherfund/teacherfund/orx9230ww 🌍 Preview: https://teacherfund-git-kro-btn-styling.teacherfund1.now.sh

meowwwls commented 5 years ago

I like it overall but just a couple possible suggestions:

this technique for using box-shadow produces an even smoother look, if you want to keep the box-shadow effect on hover!
This is not something you changed but maybe you could help come up with an accessible style since you're working on the buttons right now anyway: right now all of the yellow buttons are not accessible because of their color contrast. The "ghost" button effect on a light background and the white text on the yellow background fail color contrast tests. Using the dark grey color we're using elsewhere as the text color (except when the button is on the dark grey background, as in the footer) would be a solution.

Here are some links about color contrast:

ghost commented 5 years ago

@meowwwls thanks for the info. I love the box shadow technique and will apply this. Looking at the color contrast now and will adjust accordingly.

meowwwls commented 5 years ago

@korlando7 What do you think about a thicker border stye for the ghost buttons on hover? We can use box-shadow with the inset keyword to fake a border. We can use that instead of a real border to avoid the button taking up more space on the page than we want.

Here's an example of a bigger outline (on the right) compared to the current style on the left:

ghost commented 5 years ago

@meowwwls going to wait on the contrast updates. It seems more like a design update since a few places use the yellow / white combo.

meowwwls commented 5 years ago

@korlando7 It's definitely a design issue at this point that should be a separate issue! Your changes look great.