Halooooha~~~~ I’m back again, and again and again 😀 hohohohoho.
Today I will give you all a tutorial again. This tutorial is still related to previous tutorial, where we made Gulali’s button. Click here to see the tutorial.
Back again to this tutorial. So previously we make some button for your website or other design. This time we will focus on making a button for website. Why? because if you are aware, button at website have some effect like when you hover the button or when you click them. I really want give you some example here to ease you, but in wordpress here I can’t give a button effect like hover or click. But I will give a website with the effect 😀
Link << This website is one of my projects now 😀 but we won’t discuss about the design, just focus at the “view product” button. If you hover the button or click the button you will see the effect there. So today we will make button like that, from the design and some coding to make the effect work at your website 😀
========================================================================
Step 1
Let’s start with the last button you make from previous tutorial. You can make other button or just download it from the previous tutorial, I will use the PSD file that i give you at the previous tutorial.
So let’s clear this first. We will make 1 button with 3 effect. First is the normal, just like the previous Gulali’s button we made. Second is the effect when we hover the button, we will make it a little lighter. The last or the third we will make a button with a click effect.
First open your previous data. Save it as a .png file. Then group all the layer become one and name it as “Button 01”. Next duplicate the group and name it as “Button 02”. Then make group “Button 01” become invisible with click on the eye icon beside the group.
Ok we already have all we need to make the second button. Like I said before, we will make the button a little light on it. So open the layer style of the button layer *if you use my .PSD file, it will name “Background”. Make the gradient overlay’s opacity become 25% or less than your previous button.
Then you can change any things you want. Maybe like move the arrow a little down. If you already satisfied you can save the button as .png file again.
———————————————————————————————————————————–
Step 2
Next, we will make the third button. This time, we will make it look like it clicked. So first duplicate again the “Button 01” group and name it as “Button 03”. Next, open the layer style of the button layer. Set drop shadow’s blend mode become screen and the color change to somethings lighter than the button color, and opacity less than before. At inner shadow tab, blend mode become multiply and the color change to somethings darker, then opacity less than before and set the distance to 10, choke to 10 and size to 5. The last part, Gradient overlay, just give mark at the reverse check box.
Same like the last button, save it as .png file and you got all you need take your button to your website 😀
———————————————————————————————————————————–
Step 3
We already have all the material we need. Now open any program for edit you website *I used Dreamweaver. First make a new file or open your own file. We will make the html file first, so create an new HTML file and save it with name “home.html”.
First we make a div for our button
<div class=”button”></div>
Now we make the style for our button. Make style tag above the body tag. First we will set our width and height. Make your div size as same size as your button size.
|
001
002
003
004
005
006
|
<style>
.button{
width:450px;
height:155px;
}
</style>
|
Next we will set our button background with the button 01.png
|
001
002
003
004
005
006
007
|
<style>
.button{
width:450px;
height:155px;
background-image:url(Button01.png);
}
</style>
|
Ok, now we already have our button. Next, we will give the hover effect. Just copy the previous code and paste below it. Delete the width and the height code. Change the background-image with button02.png and add “:hover” after the class name.
|
007
008
009
010
|
.button:hover{
background-image:url(Button02.png);
}
</style>
|
The last is the third button for the click effect. Same like before, copy the button code and change the hover with active and don’t forget change the background into button03.png
|
010
011
012
013
|
.button:active{
background-image:url(Button03.png);
}
</style>
|
Ok! now you already have a button with hover and click effect 😀 and if you want to make your button look more like a button in website, add “cursor:pointer;” at the button class and when you hover the button, your cursor will change into pointer.
And that’s it! You can make other creative button you like. Just remember to make 3 button, first for the normal one, second for the hover effect and last for the click effect. Like usual I hope this tutorial is useful 
.
help us to share this tutorial and I really welcome for any comments and feedbacks. See you until the next post!!!
xoxo
The Gulali’s Army
Gulali 