Build Your Own Business Website header image

How to Configure Thesis Navigation Menu as Buttons Using CSS3 Gradients

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to create individual buttons in the navigation menu using a CSS3 Gradients button generator and applying the code to a simple Thesis menu. We also show how to configure the size, hover, padding and spaces of the buttons.

Video Transcript

The next thing we’re going to do is make these individual buttons instead of making it a lone bar. And so to make these individual buttons, what we will do is… well actually, what we will do is…well actually, if we just let that go for a moment and we go back to the generator here and we just recapture this code, it’s actually easier to create those buttons this way because now we come back over to this, paste that code. And then now instead of buttons, this is .custom UL… no pardon me, UL .menu LI a and we can just take that font size down to say 14 pixels. We can make this our hover so now that’s our hover. And then we need to put spaces in between each of these things and maybe even reduce the amount of padding there. So let’s make that 20 pixels. Well, let’s make it 30. And let’s make the…yeah, let’s just leave it like that.

And so then what we want to do is put spaces in between each of these buttons. And so the things you want to space apart are these LIs so it’s going to be custom UL .menu LI. So I’m just going to take this, paste it. We’re going to just delete all that code actually and it’s custom UL .menu LI and then we’ll just say padding… no, margin I mean. Margin left: 10 px. Okay and so that now stretches these buttons out apart.

Now obviously, this isn’t as slick an idea if you’ve got a drop down menu and so you wouldn’t use this with a drop down. And you know, while it doesn’t look brilliant in this context, you can see how easy it is to take that button generator code and you know, take a simple thesis menu and apply the code to that simple menu whether it’s with rounded corners or with this radius. And this much less…this is much easier or much faster to load and create than is an image. If you had a background image for these things instead, this is much faster and faster on your site.

Maybe you even give them a width so if we say width: 100 px; Okay maybe a little smaller. Maybe 80. Yeah you know, especially if these were the…I’m sorry, I’m going to spit this out. Especially if each of these were you know, the right length, you can give them all a fixed width and then rather than having padding in here, what you can do is text align: center. So that brings these buttons, these into the middle of your buttons.

And you know, you can end up playing with these things a little bit too. Maybe this 10 pixels is too much. Maybe you want them a little bit smaller and maybe this can go down to 20. Well actually, maybe the width can go to 90. And so you know, you can get the buttons closely fine-tuned but that is a way to use this stuff to create buttons out of the Thesis nav menu using that gradient generator.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 comments… add one
  • dean haycox January 21, 2012, 7:42 am

    Hi Rick.

    Is this video part of a video series, because I do want to create different buttons for my nave menu.


    • Rick Anderson January 22, 2012, 7:34 am

      No, this one is a stand alone answer. You should consider the BYOB Thesis Simple Nav menu plugin. It does this quite easily.

Leave a Comment