Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
So how did your button turn out? Are you happy with it? It's amazing how much variety you can get combining just a few properties. Let's take a look at the finish files and compare them with yours. You should have paid attention to not only which properties I use with things like the button, but also how I wrote the selectors and structured the styles, especially for the sprites. I'm really curious to see how closely your code matches mine, and again, if it doesn't, it's not wrong, especially if it was working. You just want to take a look at your code versus my code and see which one might be more efficient, see which approach you'll like a little bit better.
And you know what? If it ends up being your approach, that's fine. There's nothing saying that you didn't write more efficient selectors than me. Just to give you an idea of kind of what I came up with, I've showed you this earlier, but this is the button that I created. So a very simple button, it's got a nice looking gradient in it, I'm using a small little bevel up top, using the same blue color which really kind of goes with the site. And then for my sprites, again ,all four icons are showing up, and then I have the rollovers working as well, cool. So I'm going to switch over my code, and the first thing I'm going to do is focus on the button. I'm just going to scroll all the way down until I find that button.
And it's pretty easy to find, you can't miss it, there it goes, it's on line 791. When you hit it, you know it. All right, so here is my button, and I'm just going to go through line by line and talk about the different things that I did. So I set the color to white so that the text will be white. I gave it a little bit of padding, so the text will be held away from the edge of the button. I changed the font size to 1 em, that's pretty much the default, but buttons are a lot different, especially in all the different user agents. So I want make sure if they're all basically the same size. I applied a cursor pointer, that's really not necessary for this because input types submits are almost always going to show the pointer, but hey, I just want to be thorough.
I then did a small 1-pixel border, sort of that darker blue color. It's not real dark, but it's going to give it a nice little offset. I did a box shadow, and both of these apply the box shadow to it, and it's very similar to what we did before. I did an inset, so I can have little of that sort of highlight bevel, but this one is even smaller. I did 1 pixel for vertical, and I did only 1 pixel for the radius, so very, very sharp. And then I did almost white, you can see very light, light blue. I applied a border radius to it of 5 pixels. It's going to round the corners a little bit.
And then I did my backgrounds, and you can guess where I generated this particular gradient from. So I have a default RGB color of that, sort of blue that we're using all the way throughout the site. And then after that I went ahead and did a gradient. I started that out with the blue color that's prevalent throughout site, and then I went to a lighter blue. And then I just went ahead and did the syntax for all of the remaining browsers as well. So that's the button, pretty simple. It creates a very nice pleasing effect, and I could use these styles over and over again. Now as far as the rollover goes, if I scroll down a little bit, you can see that for hovering, again, the only thing I really did there, I changed the background so that their gradient goes in a separate direction, and I made the color just a little dimmer.
So it's almost like a little neutral gray with little blue tint to it. So it's not bright and shiny white. Okay, so there was my button. So I'm going to scroll up and show you guys how I handled these sprites, and I'm going to start right here at the one of the selectors that wasn't existing selector. I know I told you guys we're going to have to write new selectors. I went ahead and threw you a curveball here, so the connect li a, that's going to target-- again--any link inside of a list item that's also inside that connect region. So what it did was the text-indent, -999 ems, that was already there, that was taken the text and sort of getting rid of it. It's just pushing it off the page.
The width and the height are already there, 45 pixels by 45 pixels is displaying as block-level element, that stuff was already there, but what wasn't there was the background, that brings the social sprites in. Again, you want to make as few requests for this image as you can. So you only request it one time, and you request it on like a global version of that link. And then all you have to do, after that is simply position it. And you'll notice that I've got several selectors that do that for me. So I've the static version of the button, and then I have a hover. And I did something a bit little different.
Then you may or may not have done this, if you did, it's fine, if you didn't know about it, didn't do it, that's cool too. But notice that for certain ones like the first and the last one, I'm able to use keywords instead of values. By saying left top, I'm saying position the top left corner of the graphic to the top left corner of this link. And since they're both 45 pixels by 45 pixels, it's going to line up perfectly. Since the hover is just the right below it, I'm able to say left bottom then it doesn't work for the other ones. So for the other ones I had to move over. So remember, there's my horizontal value, and there's my vertical value.
Because I want it to move to the right, I had to use negative values for horizontal, so I went -45 and 0. And then for the bottom ones, I'm using -45 there as well. So again -45, -45, and then I just step over, so -90, 0, that's going to keep it, again, against the top portion. And then -90 over to the right and then -90 over to the right and 45 pixels down for the hover. And then finally for link, I was able to use right top and right bottom, it sort of mirrors left top and left bottom.
See, it's a lot easier when you have sprites that are really tightly packed together and they're spaced evenly. In our exercise files earlier, we had to do a lot of tweaking those to get them to position exactly where we want. When you set them in position and right up against each other, when you're absolutely positively sure that the area is going to shrink wrap to this icon, that sure is a lot easier. All right, so once again just to sort of preview how that's working, there is our sprites, and there is our button. We'll, there you go, that was your last lab. Yeah, I hope you had a great time exploring how styling navigation can enhance your sites.
Be sure to watch the additional resources movie. I'm going to show you a few tools and resources that can really help when it comes time to plan and style your site's navigation.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.