Web 2.0 Button

Step 1: Open you Illustrator program and create a new file. Select Size: Custom , Unit: Pixels , Width: 500 , Height: 400 and make sure you select RGB Color for Color Mode. Then, click OK .

Step 2: Go to your Tools window (Window > Tools ). Press D at your keyboard and then make the fill color look like this:

image 1

Select Rounded Rectangle Tool and click to any place of the artboard and you will see a message box for Rounded Rectangle options. Enter Width: 200 , Height: 70 and Corner Radius: 20 . It would be something like this:

image 2

Step 3: Click on Selection Tool or press V and click to your image. Go to Object > Path > Offset Path and insert this value; Offset: 5 px , Joins: Round , Miter Limit: 4 and press OK . Then click at the center of the image. Now, you should get something like below:

image 3

Step 4: Apply a Gradient color on it by clicking this tool

image 4

image 5

Then, go to Gradient Tool or press G ( while the Gradient image was still selected). After that, press Shift + left click from top to the center of the image:

image 6

and release the left click:

image 7

Woww..You're almost done!

Step 5: While the Gradient image was still selected, go to Transparency palate and set it to Screen:

image 8

Final Button:

image 7

Congratulation! You're done!. That's all. Now you can change the black color to any of your favorite color or add some text to it.

Web 2.0 Button

subscribe to newsletter