Step 1: Getting Started

Setting Up The Layers

So lets get on with the tutorial. First thing to do is open up PS, (yes that’s short for Photoshop), and make a new image, sized at: 590×200. Then create a new group named Dark Button. This is obviously where the dark button is going to be placed. A new layer is now needed called BG. You can now delete the original Background layer that photoshop adds to every new file. Then fill in the BG layer, (which should be inside of the Dark Button group), with #1b1b1b.

Another new layer is now needed. First create the layer ‘Button’; this is where the actual button will be designed…But wait!…How will we position it? Well that’s where the helpful guides come in. Grab a guide from the top and place it 50px from the top. Another one 50px from the left then just continue with the right and bottom.

Step 2: The Button Design

So for the button we need to grab the Rounded Rectangle tool, (right click the Rectangle Tool. Keyboard shortcut is U). Make a selection inside of the guides like so:

The Layer Styles

Now the fun part happens. Making it look good. So for this we’ll use layer styles. The colours are: #474747 to #262626. Below I’ve included an image that demonstrates how to apply each layer style.

Step 3: The Text

It’s time to give our button some text. I’ve decided to go for a nice light colour with some drop shadow and a nice gradient. The first thing to do is to make a new text layer by either choosing it in the Text Tool or by hitting the shortcut key T. Now make a selection inside of the guides, it should be roughly 65px-70px in height. Here are the font options I chose:

• Typeface: Myriad Pro
• Font-Weight: Bold
• Size: 50px
• Anti-Aliasing: Crisp
• Align: Center
• Colour: #f1f1f1 (Colour doesn’t really matter since we’ll be using a Gradient Overlay)

Next thing to do to our text is to add the gradient and outer-glow. Just double click the layer and the layer styles box will appear. The colours used for the gradient are: #c6c6c6 to #ffffff. Here are the options I chose:

Step 4: The HTML & CSS3 Awesomeness

Let’s get this show on the road, shall we? So the first thing to do is set up our files, we need an index.html and that’s pretty much it. Next it’s the code.

The HTML

Let me explain. The HTML is all pretty basic, to be perfectly honest I wanted the HTML to take a back seat in this tutorial so all I’ve done is the following few lines:

<div id="container">
     <div class="button">
          <a href="#">CSS3 Button Baby!</a>
     </div><!--end .button-->
</div><!--end #container-->

The container is just used to center our fancy CSS3 button on the page; Then we have the actual button. If you’re going to use a selection of buttons, (like we have in our new design), then I would suggest using an Unordered List but for this a simple div will do. Inside of the Div we have an Anchor link to hold our text, this will also be the actual element to be selected in the CSS.

The CSS…With Added CSS3

This is where the tutorial actually gets interesting. Below I’ve included all the code used for the button. It may seem like quite a chunk to get through but if you keep reading then It’ll be planted firmly in your brain in no time at all!

Non-Commented Version

.button a {
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none;
    padding:20px;
    display:inline-block;
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000;
    border:1px solid #525252;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626))
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }
 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Commented Version

.button a {
    /*Font Values*/
    font-size:50px;
    font-weight:bold;
    color:#f1f1f1;
    text-decoration:none; 

    /*Fundamental Properties*/
    padding:20px;
    display:inline-block; 

    /*Shadow*/
    text-shadow:0px 0px 5px #000000;
    -moz-box-shadow:0px 0px 15px #000000;
    -webkit-box-shadow:0px 0px 15px #000000; 

    /*Border And Background Properties*/
    border:1px solid #525252;
   -moz-border-radius:20px;
   -webkit-border-radius:20px;
    background:#262626;
    background:-moz-linear-gradient(#474747 60%, #262626);
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#474747), to(#262626));
}

.button a:hover {
     border:1px solid #5e5e5e;
     background:-moz-linear-gradient(#525252 60%, #303030);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#525252), to(#303030));
 }

 .button a:active {
     background:-moz-linear-gradient(#262626, #474747 60%);
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#262626), to(#474747));
 }

Explaining The Code

Since this is an advanced tutorial aimed at people with some experience handling CSS then I won’t go through explaining the #body and #container styling.

To start off with we have set a font-size for our button, this is very important because it will make our button more liquid than fixed, especially helpful if you want it to be flexible. Following the other basic font values, I’ve given it some padding to help give the text some breathing room.

We’ve also added a display:inline; property to the button. This now allows it to to be manipulated, as you would with a Div.

The Shadowy Effects

Now comes the CSS3! The first thing I’ve done is add some shadow, to the actual text and the outside of the button. We have to use the special code for Mozilla Firefox, (-moz-) and Google Chrome/Safari, (by using the WebKit property, -webkit-). If you’re wondering what the values of 0px 0px 15px #000000 mean then let me explain:

• 1.) 0px = The placement of shadow of the X Axis. That means left and right. It can also accept negative, aswell as positive values, (-3px, 3px).
• 2.) 0px = The placement of the shadow on the Y Axis. That means up and down. It can also accept negative, aswell as positive values, (-3px, 3px).
• 3.) 5px/15px = This is referring to the amount of blur on the shadow.
• 4.)As you may have guessed, the #000000 is the colour of the shadow. If you didn’t know that, then please stop reading this tutorial and go and learn what #HEX values are.

The Border Radius

You may notice that the border properties are targeted the same here as with the shadow effects, by using -moz- and -webkit-. Even though I’ve only given one parameter here, (20px, which means round the corners by 20px on each side), you can also have a custom radius on each corner. Try pasting 20px 10px 5px 30px in the place of the single 20px value. You’ll notice that each corner now has a different radius. The first 20px value is for the top left, the second the top right, the third the bottom right and the fourth the bottom left. Just like using the margin property.

The Awesome CSS3 Gradients!

We finally get to the part you’ve been waiting for, the gradients! First we have the Firefox specific gradient. Here’s a run down of everything included for FF.

• 1.) -moz-linear-gradient – This can be used to specify whether our gradient is going to be either Linear or Radial. In this case I’ve used linear.
  • 1.) We start with the lighter colour at the top of the gradient. We make it so it covers a little more of the button, (60%), than the darker colour used.
• 2.) -webkit-gradient – This one can look a little tricky at first, but no worries, in just a few seconds it”ll be embedded into your brain. Also this property does not disclose the type of gradient in the value name.
  • 1.) Firstly we declare that it will be a linear gradient.
  • 2.) We then declare where it will be placed. In this example we have 0 0 (from the left and from the top – top left).
  • 3.) Next is giving the size of the gradient. Here we have 0 100% which means start at the very top, (0), and go to the very bottom, (100% of the element).
  • 4.) After that I think the rest is pretty self-explanitory. Just which colours we’re using.

Final Thoughts

In conclusion I would like to say a big thank you to those people who have stuck around through-out this tutorial. If you have any thoughts, be sure to share them below.

I’d like to take this chance to explain to the younger-in-mind CSS coders out there, (It means your at the beginner/intermediate level), how to solve the strange no-height issue when floating child elements. I’ve seen this problem affect many advanced coders as well as the newbies, and this is it:

Or

Yes, We’ve all been there. It’s a problem where the Parent element doesn’t recognise the Child elements, only the Child element’s Paragraph tags. Your code will look something like this:

The Problem

(x)HTML

<div id="parent_element">
	<div class="child_element">
		<p>Left</p>
	</div>
	<div class="child_element2">
		<p>Right</p>
	</div>
</div>

CSS

#parent_element {
	width:600px;
	padding:20px;
	border:1px solid #ccc;
	background:#e6e6e6;
}
.child_element {
	width:260px;
	height:50px;
	float:left;
	background:#666;
}
.child_element2 {
	width:260px;
	height:50px;
	float:right;
	background:#666;
}

The Result:

Not Pretty, Is It?

Solving The Problem With Display:Inline-Block;

We only need to add one thing. Take a look, I think I’ve made it pretty obvious :

CSS

#parent_element {
	width:600px;
	padding:20px;
    /***Right Here***/ display:inline-block; /***That's Right!***/
	border:1px solid #ccc;
	background:#e6e6e6;
}

The Magic At Work:

Final Thoughts & Wise Words

All I can say is that it works perfectly. However you can’t center the Div using margin:0px auto; so just add another wrapper. I also realize that there are other ways to fix this issue. However this one works best for me because I’m used to using it. If you enjoyed this or think I’ve failed epically, leave a comment below!

If you are a web developer and have never seen a Syntax Highlighting plugin before then here are the basics:

• They’re mainly used for highlighting syntax, (showing the code), that would otherwise be interpreted by the browser as normal code. In short it stops the browser from outputting the code.
• Most Syntax Highlighters can output many different languages such as (x)HTML, CSS, PHP, javaScript etc…

So lets take a look at the best Highlighter I personally know of: SyntaxHighlighter by Alex Gorbatchev. Yes i know that page with the bright yellow looks very intimidating right now but not to worry that’s why I’m here

Step #1: Downloading The Source Files

So lets go over and download the source files that we need to get the highlighting working.

You should have this:

Step #2: Creating Our HTML File

Now we need to make a HTML page to test our new toy, (yes I am still talking about the Highlighter ).
So set up a page with the following values and Divs etc…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>The SyntaxHighlighter Tutorial Files - By KayRoseDesign</title>
</head>
<body>
	<div id="wrap">
		<div id="container">
			<h2>Everybody Was 'Syntax Highlighting'!</h2>
		</div>
	</div>
</body>
</html>

Just a pretty basic html page.

Step #3: Setting Up All Of The Files

It’s time to get everything in place so that we can link to them the next step; your folder should look as follows:

So we need to add the files named shBrushXml.js and shCore.js into our JS folder. The we need to add the shCore.css and shThemeDefault.css in our CSS folder.

Linking To The Files

In the header section below the title tag, add the following links:

<script type="text/javascript" src="js/shCore.js"></script>
<!-- At least one brush, here we choose XML. You need to include a brush for every language you want to highlight -->
<script type="text/javascript" src="js/shBrushXml.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

As you can see each part has been described very well be Alex Gorbatchev.

Step #4: Adding Some JavaScript

Now we’re onto the last step, yay!
So we only need to add one more piece of javaScript, and here it is:

<script type="text/javascript">
	SyntaxHighlighter.all()
</script>

Just put it below the links to our javaScript file and Voila!

Outputting Some HTML!

Lets show our code shall we?
Well all we need to do is out in some pre tags, like so:

<pre class="brush: xhtml">
<h2>Hello, World!</h2>
	<p>
		Paragraph Tags!
	</p>
	<p>
		<strong>Strong Tags within Paragraph Tags!</strong>
	</p>
</pre>

And the output will looks like so:

I hope you enjoyed this quick tutorial. If you did then leave a comment telling me why you liked or telling what I did wrong!

Final Code

/**
  * Easy Gallery jQuery Plugin
  * Author: Drew Douglass
  * Version: 0.1
  *
  *
  */
(function($){
  	$.fn.easyGallery = function(settings) {

  		//setup some options
  		var opts = $.extend({}, $.fn.easyGallery.defaults,settings);
  		return this.each(function(setting){
  			var options = $.extend({}, opts, $(this).data());
  			$(this).hover(function(){
  				$(this).siblings().stop().animate({
  					opacity: options.opacity
  				},options.duration);
  			}, function(){
  				$(this).siblings().stop().animate({
  					opacity: options.originalOpacity
  				},options.duration);
  			});
  		});

  	}
  	$.fn.easyGallery.defaults = {
  		duration: 500,
  		opacity: 0.5,
  		originalOpacity: 1
  	}
})(jQuery);

Helpful Resources

• A Plugin Development Pattern – Learning jQuery
• Plugin Files/Github Repo

Thank to Jarel Remick for providing the free demo images.