Learn To Create A Switch Button

What We’ll Be Creating

Lets Get Started…

Create a new document 800×600 pixels with any color background. Set your foreground color to #303030 and background color to #161616, then select the “Gradient Tool” (G) with a radial gradient.

Drag the gradient from the middle of the canvas outwards then apply the noise filter by going to “Filter > Noise > Add Noise”.

Your background should look something like this.

Creating The Switch Outer Circle

Select the “Ellipse Tool” (U) then select shape layers as your path type from the options bar at the top.

Drag out an ellipse onto the middle of the canvas then rename the new layer “Outer Circle”.

Once your happy with the size of the button add the following layer styles using the following settings.

You should have something like this.

Creating The Switch Indent

Duplicate the “Outer Circle Layer” then rename the duplicated layer “Switch Indent”. Right click the duplicated layer then select “Clear Layer Styles” from the menu. We now need to resize the “Switch Indent Layer”, so select the “Free Transform Tool” (Ctrl + T) then drag one of the corner anchor points inwards about 10-15 pixels.

Now add a gradient overlay to the “Switch Indent Layer” using the settings below.

Creating The Switch

Duplicate the “Switch Indent Layer” then clear the layer styles by right clicking the layer and selecting “Clear Layer Styles”, at this point should also rename our duplicated layer to “Switch”. We now need to resize the “Switch Layer” by about 1-3 pixels, select the “Free Transform Tool” (Ctrl + T) then resize the ellipse.

Now add a gradient overlay using the settings below.

You should have something like this.

Duplicate the “Switch Layer” then rename the duplicated layer to “Switch Main”. Clear the layer styles from the “Switch Main Layer” by right clicking and selecting “Clear Layer Styles”. We now need to resize the new layer only this time making it alot smaller and moving it up slightly.

Now add the following layer styles to the “Switch Main Layer” using the settings below.

You should have something like this.

Adding Some Switch Detail

Duplicate the “Switch Main Layer” then clear the layer styles, rename the layer to “Switch Shadow” then drag the layer underneath the “Switch Main” layer. Blur the layer by selecting “Filter > Blur > Guassian Blur” using the settings below.

Using the “Arial Font” create two letters on separate layers, the letters being “I” and “O”. Place the two letters onto the button.

Using the “Text Tool” (T) add the words on and off at the top and bottom of the button.

Now add the following layer styles to the two text layers.

Finally you should have something like this.

Additional Steps – Turn The Button Into A Working CSS Sprite

If you would like to use this button as a real button on your website then you can follow the next few steps provided.

The first thing you need to do is duplicate the button and create an “On” and “Off” state.

Once you have your on and off states we need to turn the two states into a sprite and do this by making a selection around one of the buttons. Try and get as close to the button as you can.

Once the selection has been made hide all your layers apart from the button layers you have selected, now go to “Edit > Copy Merged” (Shift + Ctrl + C). Now that the button is copied to the clipboard go to “File > New” (Ctrl + N) the dimensions of the element copied to the clipboard should already be inputted into the dimension boxes. Paste the element onto the canvas with a transparent background.

We now need to adjust the canvas height to double the height of the pasted element, doing this will allow us to fit two buttons onto the canvas. To adjust the canvas go to “Image > Canvas Size”.

Copy and paste the 2nd state of the button onto the new canvas in the same way as we did earlier.

Save the sprite as “Button.PNG” inside a new folder on your desktop.

The Button HTML/CSS

Setup a blank HTML file with your button.PNG file inside the directory. I’ve setup a my HTML file and it looks like this.

[sourcecode language=”html”]
<body>

<div id=”container”>

<ul class=”button”>
<li><a href=”https://crayonify.com” title=”Launch Photoshop Plus”>Launch Photoshop Plus</a></li>
</ul>

</div><!–container ends–>

</body>
[/sourcecode]

[sourcecode language=”css”]
body {
background-color: #1a1a1a;
}

#container {
margin: auto;
height: 612px;
width: 950px;
background-image: url(images/background.gif);
background-repeat: no-repeat;
}
[/sourcecode]

I’ve basically just set my background as the HTML background and set the dimensions of the container which will hold my background and button. Inside the container I’ve created a simple list which we’ll use to show our button. The buttons CSS looks like this.

[sourcecode language=”css”]
ul.button {
margin-top: 250px;
height: 114px;
width: 72px;
float: left;
margin-left: 400px;
}

.button li {
list-style-type: none;
float: left;
}

.button li a {
outline:none;
display: block;
text-indent: -9999px;
background-image: url(images/button_sprite.png);
background-repeat: no-repeat;
background-position: left bottom;
height: 114px;
width: 72px;
float: left;
}

.button li a:hover {
background-image: url(images/button_sprite.png);
background-repeat: no-repeat;
background-position: left top;
}
[/sourcecode]

Click Here to view the Demo.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.