Rising Button Tutorial (hover effect)

Today I will be teaching you how to create a cool button hover effect using only css and photoshop to create the button. Because of the nature of the effect, I’ll call it the Rising Button. Here’s what our finish product is gonna look like, hover over the button to see the effect.

Hover Effect

I’ll try to make it clear as possible but this is my first tutorial, so pardon me if I’m not clear on the instructions. Also feel free to ask questions if you have any. We’ll divide the tutorial into two phases, first, I’ll teach you how to create the button in Photoshop, then the CSS that would make it animate. So here we go!! Lets begin the tutorial.

Phase 1 (Photoshop):
1. Let’s start by creating a new file. Everyone probably already know this, but just in case my grandma tries to do this tutorial, I’ll say how it’s done too.
File >> New (Ctrl + N)
Lets also give an allowance to the size, so for now lets do 500×500

2. Lets fill this layer with a white background, just so we can see what we’re doing.
Hit “D” on your keyboard to reset the foreground and background color to default black and white.
Edit >> Fill (Shift + F5) and name the layer “background”

3. Create a new layer and name it “button bg”.
Layer >> New >> Layer (Shift + Ctrl + N)
Make the size 200px x 250px

4. Select the Rounded Rectangle Tool and set Radius to 5px. Then create a rounded rectangle similar to the one below:

Rounded Rectangle

Rounded Rectangle

5. Double click on the layer (or go to Layer >> Layer Style >> Blending Option) to make the Layer Style window appear and follow the setting below:

Gradient Overley Setting

Gradient Overley Setting

Inner Glow Setting

Inner Glow Setting

6. Select the Horizontal Type Tool or Text Tool and add a text on top of the button. Name it whatever you want. In this case, I named it “Click Here”.

7. Create a new layer, name it “shadow” and Select the Ellipse tool. We’re going to create a hole looking shadow where the button will go up and down. Drag the cursor across the button. By now your image should look like this:

Ellipse Tool

Ellipse Tool

8. Select Filter >> Blur >> Gaussian Blur and set the radius to 2px.

9. Create a new layer, name it “cover” and select the Rectangle tool. Make your foreground color white and create a rectangle that’s just big enough to cover half of the shadow and the bottom of the button. By now your image should look like this:

Button with hole

Button with hole

10. Create a new group and name it “hover” then select all layers except the background layer and drag it inside the button group. Layer >> New >> Group

11. Duplicate the group and name it “normal”. To do this you have to select the button group then go to Layer >> Duplicate Group. Or you can just right click on the button group and select “Duplicate Group”.

12. Select the “hover group”, hold the Shift key and press the down key 5 times.

13. Select both the “button bg” layer and “Click Here” layer inside the “normal group” by holding the ctrl key and clicking on the layers. Then press the down key 6 times. By now your image should look like this:

Complete Image

Complete Image

14. Ctrl + Click on the “cover” layer of the “normal group”, this would make a selection of our cover layer. Select the “button bg” layer of the same group and hit delete key. Select the shadow layer of the same group and hit delete key. Then hide the cover button.

15. Repeat step 14, but this time do it on the “hover group”.

16. Select the crop tool and crop so that there’s a little bit of white space left on the top and bottom. Hide the background layer and save your image in a .png format. And that completes our Phase I (Photoshop)

Phase 2 (HTML + CSS):

1. Your HTML Code should look like this:

<div id=”rising-button-hover-effect”>
<a href=”URL_HERE“>
<img src=”http://example.com/images/hover-effect-button.png” alt=”Your Description Here” />
</a>
</div>

All you have to do now is replace the code in red with your own info

2. Your CSS Code should look like this:

#rising-button-hover-effect{
overflow:hidden;
height:43px;
}
#rising-button-hover-effect img{
top: 0;
position:relative;
}
#rising-button-hover-effect img:hover{
top: -50px;
position:relative;
}

Note that depending on the size of the button you created, you might have to adjust the “height” of the div and “top” of the image hover.

There’s plenty of ways to code it but this would at least give you the idea. You could also make the image a background image and just adjust the background position. This would be useful on form buttons. Message me if you’re having trouble doing it, I’ll be more happy to help. So that completes our tutorial, hope you guys found it useful. Peace!!

-mjbenzon

Comments

  1. I am genuinely happy to read this weblog posts which carries tons
    of valuable facts, thanks for providing these data.

Speak Your Mind

*