Simple Web Buttons

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

Hello GimpChat. I have been working on an idea for an upcoming tutorial and this is my current progress. The idea was to create a simple button that has a hover and an active effect in Gimp, then translate that into an html/css button. Thoughts? I realize the text needs work, I am still looking for a decent font to use.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

I think they look cool and I don't see anything wrong with the text, for buttons they have to be readable so a plain font works best for me. You could always try a thicker bolder one then compare, but I like them.

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

molly wrote:

I think they look cool and I don't see anything wrong with the text, for buttons they have to be readable so a plain font works best for me. You could always try a thicker bolder one then compare, but I like them.

I would love to use Helvetica for a font, but I unfortunately do not have it on this computer. I think the problem I'm having with it is that it is too thin and too spaced, so a more condensed bold font would be ideal. Thank you for the response!

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

http://uniquefont.kutakharisma.com/helv ... nload.html

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

Thank you for the link! I'll see if this font helps at all. What I was originally going to do was just use google fonts for the html/css side of it anyway, so the end result would have at least been helvetica. Thank you, though.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

I have been looking everywhere and most of them say free but then they aren't free but there are lots of substitutes and I can't tell the difference, they all look the same to me, lol

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

Yeah I have gotten very accustomed to using it since I have it on my mac, and it just feels so weird not having it

Thanks for the link though, it was very helpful.

molly · **Joined:** Apr 07, 2010 **Posts:** 14182

Why not copy it to your desktop then send it to your windoze 7 computer.

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

I honestly just haven't had the motivation to as of yet to transfer the files. This is actually the first time I've really had the need to, so I may do it eventually

Odinbc · **Posted:** Sat May 17, 2014 1:14 pm **(#10)**

Wyrlor, When your ready for the web replicate the button with, CSS-Tricks handy CSS3 Button Maker.
This ones pretty good, there are a bunch of other pure CSS button generators as well.

Wyrlor · **Joined:** May 15, 2014 **Posts:** 20

I was actually just going to code it myself :S I am very well versed in html and css, so I was just going to write the code custom. Although my major in college is software engineer, I have a minor in web development, so this is right up my alley

Odinbc · **Posted:** Sat May 17, 2014 2:05 pm **(#12)**

Wyrlor wrote:

I was actually just going to code it myself :S I am very well versed in html and css, so I was just going to write the code custom. Although my major in college is software engineer, I have a minor in web development, so this is right up my alley

Complicated gradients buttons are not my idea of fun coding, that's why I made the suggestion. It's a time management thing for me.

BTW, It's nice to have another web coder at Gimp Chat.

alexpop · **Joined:** Sep 24, 2014 **Posts:** 1

Hello Wyrlor,

Congratulations on your work. I would like to apply a hover and an active effect to a button on my website. Could you please help me to translate that into css?

Thank you in advance,
Alex

swb · **Posted:** Mon Sep 29, 2014 7:50 am **(#14)**

Your buttons are great -- I like the one in the middle best. I agree with you that Helvetica is good choice. So many viewers are on mobile devices these days, using a clean sans serif font with no outline and no embossing works well on big and small screens.