Top 30 sites for freelancers
Every site you'll ever need! check it out →

How To Make A Button For Your Website

How To Make A Button For Your Website

Hello there and today i will be showing you how to make a nice button for if your are starting a new website and you are not the best at photo shop

Why might I want to create a button?  

Landing pages, creating static pages with html, or an editor, creating custom menus.  Either way, it’s a useful exercise for those getting started with design.

The final image will look a little something like this:


OK lets get

Step One: make a new canvas, the measurements that i used was 500px by 500px it worked quite well.

Step Two: Select your gradient tool and change the effect to radial, you can then choose a dark grey and a black, drag from the middle towards the edge.

Step Three: Make an ellipse shape, it can be any size you want it to be.

Step Four: Double click the layer on which you made your ellipse shape this will open up the effects pannel, make sure the inner shadow is ticked and turn the distance to 0 and turn the size to 10 like this

Step Five: Tick the Gradient Overlay box and make sure the settings are on default, we dont need to change them, all you need to do is change the colour to two colours of your choice, here i have choosen blue: #007fe0 and a light baby blue: #cef8ff

Step Six: Select your text and put it into the ellipse shape, it can be any size as long as it fits inside, also you can have whatever you want as the text.

Step Seven: change the text to whatever font you want and make the colour white

Step Eight: double click the layer of text and tick stroke in the effects pannel

Step Nine: change the fill colour to a colour in the middle of your two choosen colours for the ellipse.

Step Ten: add this button to your website!

I hope this helped you out

Written by Jake

Jake is a 17 year old graphics designer from the UK. He has been producing graphics for free on several forums, such as banners, logo's backgrounds, and has amassed a vast array of knowledge about graphical software and graphics design.