PDA

View Full Version : Free Button template


tahbikat
01-09-2016, 08:38 PM
Hey guys! I was working on some buttons for the homepage of my site and realized how much I love buttons, omg. ;-; They're so cute and nifty.

Hopefully I'm not the only one with a fascination for sleek buttons, so, if anyone would like to use these, feel free!

Blank Template:
http://i.imgur.com/cqelCSG.png

Just edit the hue and saturation values in an image editor to change the colors!

And here's two completed ones you are free to use. They are used on my site, but I don't mind! I used free pixels from an RPG pack found here because I'm lazy: http://www.deviantart.com/art/420-Pixel-Art-Icons-for-RPG-129892453

If your site uses vectors and not pixels, well, you'll just have to make your own images for each button, soz. :c

http://i.imgur.com/n4lfdft.pnghttp://i.imgur.com/epTKx2L.png http://i.imgur.com/ndboh1m.png

For the Sign Up one, if you use it, please replace the eggs with your own! To edit them out, simply add the blank green template in a layer below the sign up one, then erase the eggs out if it. Easy peasy!


EDIT:

Here is Kyttias' coded version, which doesn't use images but CSS instead! This means you can easily change the text and colors if you wanted.
http://jsbin.com/hebadorizi/edit?html,css,output

Distortion
01-11-2016, 10:05 AM
Awesome! I'll make sure to use it :meow:

tahbikat
01-11-2016, 12:03 PM
Glad you like! ^^

Kyttias
01-11-2016, 03:37 PM
I managed a semi-decent css-only version: http://jsbin.com/hebadorizi/edit?html,css,output (Image on one side for comparison.) The gradient doesn't match up perfectly but they're hard to do. (You can attempt to make a better one with a tool like this one (http://www.cssmatic.com/gradient-generator).)

I can't match up the font, either. So this was mostly just for practice/funsies.

tahbikat
01-11-2016, 04:03 PM
Woah, that looks really good! That would be very useful for those who would rather a coded button rather than an image. Certainly makes it easier to edit the text too. (: I'll add this to the first post!