Creating Buttons with HTML and Photoshop

This tutorial will teach you how to add an effect to a button on your site.

We will use only Photoshop and some HTML.

First, open up Photoshop and and hit Command + N to open a new file.

Make the new file 150px by 40px and set the resolution to 72 pixels/inch.

This is an example of what your setup should look like.

This is an example of what your setup should look like.

Next press “u” to use the rectangle tool and create a rectangle that fills the canvas.

Make sure you have your properties window opened, which is listed under Window and Properties.

Change the color of the rectangle using the Properties window shown below.

03.png

Change rectangle to desired color.

After rectangle is the correct color, flatten the image by going to Layer → Flatten Image.

Next, create a new layer by selecting the “Create New Layer” tool in layer panel.

See example below:

Now add text to the button using the text tool. Press “T” to select text tool.

Create a text box outside of the canvas and type in "Button."

You can change the color of the text by selecting the text tool (“T”) and highlighting the text and doubling clicking the foreground color in the bottom of the tool bar.

05.png

I have placed my text closer to the left because the animation will be sliding the text left to right, and then on the mouse out, right to left.

06.png

To begin animation, go to Window → Timeline.

At the bottom of your screen, the Timeline will appear with a button that says “Create Video Timeline.” Select this button.

This should appear on your screen:

07.png

Next, select the arrow next to buttons to see the drop down menu as shown below:

09.png

For the animation, we will only be changing the placement of the text, so select the clock next to transform. It will turn yellow and a yellow diamond will appear on the timeline. This diamond is called a keyframe. A keyframe marks the start and end points of an animation. We want our text to begin where it is now and end over to the right.

You made need to zoom in on the timeline, and you can do so by dragging the arrow closer to the mountains icon as shown below.

09.png

Next, we are going to drag the red needle over to 10f, and then we are going to move the text over to the right by clicking and dragging and holding down “Shift,” so that it stays in a straight line. A gray keyframe is added at 10f. If you press the spacebar, you can see the animation.

We are ready to save this Gif.

Go to File → Save for web, and select Gif in the upper left drop down menu.

Your screen should look like this before you press save.

10.png

Now save this .gif file as "LefttoRight."

Now we will do the second part of the animation. Using the same file we have been using, we are going to click on the first keyframe in the timeline (the one at 0f), and delete it by pressing delete. Next, move the other keyframe that is on 10f over to 0. We are doing this because that second keyframe is where the text ended in the last animation.

Pull the needle over to 10f and drag the text back over to the right while holding “Shift.”

Save this .gif the same way as before and call it "righttoleft."

Now we need to save the image because it is the starting point. Go to "save to web" again and save the canvas as a .png file.

Now we are ready to add this to HTML. We will use the following code:

<img src="PNG file URL" alt="Button" onmouseover="this.src='LefttoRight GIF URL';" onmouseout="this.src='RighttoLeft GIF URL';" />

The image and .gifs must be added as a URL.

After you get the URLS for the image and animation, add them to the code, and then add them to your site.

It should turn out like this:

11.gif