[Peaky Blinders]

In this tutorial, I will be showing you how to create a professional looking button for your websites, and then use CSS (Cascading Style Sheets) to create a hover effect once you have your mouse hovered over it.

CREATING THE BUTTON

1) Firstly, open up your desired graphics program (for the purpose of this tutorial, I will be using Adobe Photoshop CS6). Create a new document of any size, enough room for you to work, as we will trim this after.

2) Choose the Rounded Rectangle Tool, and create a sized button of your requirements, set the radius (top toolbar) between 3 – 10, I chose 4.

Spoiler (Click to View)







3) Pick the base colour of your button, you can do this by double clicking on the thumb under the Layers panel.

Spoiler (Click to View)



For this tutorial, I decided to go with blue. (You can skip this step if you choose your preferred colour as your primary colour when created the original rectangle…)

4) Next, right click the rectangle layer and go to Blending Options, go to Gradient Overlay and change blend mode to Overlay, tick the Reverse box and change the opacity to sit at around 50%. Next, go to the Inner Shadow option in the Blending Options window, and change the Blend Mode to Overlay, the Distance to 0, and the Size to 3.

Spoiler (Click to View)





As you can see, our button is coming along nicely. Using Inner Shadow will add volume to out button and it’s these little things that really make the image stand out at the end. We will now add a gloss effect.

5) Next, click the thumbnail once again for the button base, then get the Move Tool (the main arrow, top of toolbar), and copy the layer (Ctrl + C), create a new layer and paste the shape (Ctrl + V) to that layer.

6) After that, go to Create new fill or adjustment layer option at the bottom of the layer panel, and choose Gradient. Make sure the gradient is going from a white solid to transparent, and then tick reverse also.

Spoiler (Click to View)



7) Now we must adjust the gloss effect slightly. Make sure the Move Tool is selected, and press the Down Arrow on your keyboard ONCE, and the Left Arrow on your keyboard ONCE.

8) Choose the Direct Selection Tool and then select the leftmost key points of the shape. See the images in the below spoiler to see how I do it.

Spoiler (Click to View)





9) Once they are selected, press the Right Arrow on your keyboard TWICE. This has now created a faded, contracted 1px shape which gives us a nice effect around the top.

10) The last step to finish our gloss effect is to select the Rectangle Shape Tool (the one above the Rounded Rectangle Tool at the beginning of the tutorial) and select the option Subtract From Shape Area (see spoiler below for the correct button). Next, highlight the bottom half of your button and it will erase it, to create a nice effect. Make sure the new layer we created for the gloss effect is selected.

Spoiler (Click to View)





Feel free to change the layer opacity to around 85%, like me, to give it a more natural look.

11) Next, add text. Make sure you add this text UNDER the gloss layer. Once the text is added, add a drop shadow using the settings in the image below.

Spoiler (Click to View)



That is our button pretty much complete. Now, we must trim the extra space by going to Image > Trim… and press OK. Save this as .PNG for best quality.

12) On your main button base, change the base colour (like I said in the beginning steps) to whatever you like, I will choose red just to make it stand out. This will be what it changes to when the mouse is hovered over it.

13) Again, save this as .PNG.

CODING

I will not run through how to code in HTML and CSS to give you the desired effect. If you want extra help on this, feel free to PM me.

Below is the code I have written to give you the effect. Place the following code in between the HEAD tags of your coding…

Code

<style>
#button {
   background-image: url('NAMEHERE1.png');
   height: HEIGHT OF DOCUMENTpx;
   width: WIDTH OF DOCUMENTpx;
}

#button:hover {
   background-image: url('NAMEHERE2.png');
}
</style>

Replace NAMEHERE1.png with your first created image, and replace NAMEHERE2.png with your second, edited image. Replace the HEIGHT OF DOCUMENT and WIDTH OF DOCUMENT parts with the final width of the button, after trim.

Place this next piece of code within the BODY tags of your coding…

Code

<div id="button">

</div>

I hope this helps you all out a bit, even if small sections of it do. It took me a long time to write.

If you need any help with anything of this tutorial at all, feel free to post in here or PM me for assistance, I will respond to everyone eventually. Sorry for any mistakes.

[MᴇᴛᴀʟSʟᴜɢ]

This is a legendary tutorial, not sure why it has no interest! you even supplied the HTML. thank you!