Create a Set of Colorful Rounded Buttons For Your Website

In this tutorial I will show you how to create a set of colorful rounded buttons for your website.

This is the final image with all the buttons minimized and aligned together:

Step 1:

Making the First Red Button.

Open a new document, 600px width and height.

Create a large round circle, keep the shift button pressed so its rounded and equal from all sides, with red color [code: #EB1717] in it:

Apply the following Layer Styles settings:

Shadow mode color : grey : #978787
Highlight color: white #ffffff

This is what you should get:

Step 2:

Create a new Layer. Type an X on it, with any font you think is better, I used Arista Light at 200pt since the image is so large. Align the X as shown in the image:

Step 3:

Apply the following Layer Style setting to the text layer:

Now change the Layer effect to Screen.

You should get :

Step 4:

Creating the other red button.

Save the file as a PSD, then save it again as Red2.psd, so you dont have to go through the whole process again. Simply on the Circle layer, change these style settings:

Color : #EEE4D5
You’ll have to change the ‘X’ to a ‘!’, I’ve used the Georgia Font at 232pt. The result :

Step 5:

Creating the Light Blue button:

Again, save this file, then save it again as blue.psd, then change these settings on the style layer with the circle:

Color: #DDBDDA Pink

Color: #68BBB8 Light blue

Now to change the symbol, I used the Arista Light font, at 200pt for the ‘@’ sign.

We get the blue button:

Step 6:

Creating the Dark Blue button:

Again, save this file, then save it again as darkblue.psd, then change these settings on the style layer with the circle:

Color: #CCEAD9 Light Green

Color: #6872BB Dark Blue

Now to change the symbol, I used the Heisei Maru Gothic font, at 200pt for the ‘?’ sign. You may use whatever font you like.

We get the Dark Blue button:

Creating the Green Button.

Again, save this file, then save it again as green.psd, then change these settings on the style layer with the circle:

Color: #AC5D5D Maroon

Color: #7DBB68 Green

Now to change the symbol, I used the WebDings font, at 200pt for the ‘Information’ sign, you get it by hitting the letter ‘i’ on your keyboard. You may choose to change this. The Green Button:

Step 8:

Creating the Pink Button.

Again, save this file, this time save it as pink.psd, then change these settings on the style layer with the circle:

Color: #C5E3E8 Light Blue

Color: #C076AE Purplish Pink

Now to change the symbol, I used the WebDings font, at 200pt for the ‘Chat’ sign, you get it by keeping the shift button pressed and hitting the ‘-‘ button on your keyboard. You may choose to change this. The final Pink Button:

Finally you have created all 6 buttons, you can play around and create more buttons with other colors as well.

Final image all six buttons minimized and aligned together:

I hope you found this tutorial useful. Feel free to leave any questions or comments related to this tutorial.