Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Enhancing buttons with gradients

From: CSS: Styling Navigation

Video: Enhancing buttons with gradients

The addition of gradients to CSS was a huge turning point in our ability to stylize elements through CSS. Unfortunately, the syntax is not the easiest thing in the world to master, and uneven browser support means we currently have to use a number of prefixes in older syntax as workarounds in order to get them to work cross-browser. So in this exercise we're going to explore the Gradient syntax and ways that you can make writing them a little bit easier on yourself. I have the buttons file open from 06_03.

Enhancing buttons with gradients

The addition of gradients to CSS was a huge turning point in our ability to stylize elements through CSS. Unfortunately, the syntax is not the easiest thing in the world to master, and uneven browser support means we currently have to use a number of prefixes in older syntax as workarounds in order to get them to work cross-browser. So in this exercise we're going to explore the Gradient syntax and ways that you can make writing them a little bit easier on yourself. I have the buttons file open from 06_03.

Just underneath the box-shadow that we were creating in the last exercise, I'm going to create another background declaration, and yes, I know I have one at top, but I like putting the gradients at the bottom. So gradients are always going to be a part of your background, and I have to specify what type of gradient I want. In this case, I want a linear-gradient. The next thing I have to do is specify the direction that I want the gradient to follow. Now I open up parenthesis at this point, and for this particular gradient I want to say to bottom, so it's going to give from the top to the bottom and then a comma, and I'm going to separate the color stops.

Now color stops are basically what color the gradient should start at and how many different colors you have within that gradient. I'm going to do a really simple one here of two colors, so I'm going to do rgb(30,87,153), so it's just a regular color declaration. The next thing I need to do is I need to tell it where I want that to position itself, and I'm going to say 0%. Now because it's saying to the bottom, that's essentially saying I want this color up top. And I can add as many colors as I want using that percentage as, hey, go this far down and do this color and do a gradient between the two of them.

Well, I'm just going to do a really simple gradient that starts at the top and goes all the way to the bottom. So here I'm going to do rgb, and inside parenthesis here I'm going to do 125, 185, 232. So this is a much lighter blue color. That I'm going to do 100%, which means all the way down at the bottom. Now don't forget to close parentheses that you opened up the very beginning. When you're doing the RGB syntax it's really easy to forget that. So don't forget to close that, and then I'm going to type in a semicolon. All right, I'm going to save this, and I'm going to go ahead and test that, and indeed, there is my gradient. It's going from that darker blue at top to the lighter blue on the bottom, which is exactly what I was going for.

Now you probably saying to yourself, well, that syntax wasn't that bad, why were you making such a big deal out of that? Well, I'm making a big deal out of it because if you want gradients to work everywhere, you have to support just a mind-numbing array of prefixes and older syntax, because the gradient syntax has been updated over the past couple of years and older browsers supported the older syntax. So in order for you to really be cross- browser compliant, you have to use several different forms of syntax for that, which can be really tedious, which is why I want to introduce you to this tool.

This is the Ultimate CSS Gradient Generator. You can find this at colorzilla.com/gradient-editor. This is a fantastic tool. I cannot recommend this enough. For those of you out there that are graphic designers, and you've worked with building gradients in Illustrator and Photoshop, this tool allows you to build gradients exactly the same way. You can come in and add your color stops and move them around and get rid of color stops and change colors. This is a really powerful editing tool. And then it goes ahead and generates the syntax for you.

So you're really just going ahead and creating whatever you want and then copying and pasting that syntax, it is so cool. There is all these Presets here and some of them are really nice, they are like glass buttons and some really good looking stuff. You can see a preview of it over here. I'm just going to grab the first gradient because it's sort of the blue we need, and it's also get kind of the nice little beveled glass look to it. There are a lot of things that you can do, you can adjust the hue and saturation, you can reverse the gradient, you can also change the Orientation, the direction of it, so there is all sorts of really cool stuff that you can do here.

I'm going to go right down here to the actual syntax, and it says, okay, what color format do you want? I'm going to switch it to RGB just to say consistent with what we've done. I can go ahead and throw in Internet Explorer 9 support, I definitely want to that. I can turn that on, that's going to give me this filter syntax down there. And then the very next thing I can do, I can just hover over the code, and this nice little button come up that says Copy. And I click on that, and it says, okay, you've copied it to the clipboard. Now it's just as simple as going back into my code editor--I might get rid of the existing gradient--and then I'm going to paste. This is going to get messy, so bear with me.

Boom! That is messy. I'm going to go ahead and use a little Dreamweaver tool here to apply source formatting. It's going to clean this up a little bit. I just want to go through some of this code here. I'm really just going to go through various comments. For older browsers that don't support gradients, they are going to get a solid RGB color. For Internet Explorer 9, we need a conditional override of that filter at the bottom in order to use SVG. Then we go down, and we see syntax for Firefox 3.6, and we have syntax for Chrome and Safari 4+, then the updated for Chrome 10, syntax for Opera, syntax for Internet Explorer 10, the W3C's non-prefix syntax and then at the very, very bottom we have Internet Explorer 6 through 8, which is using their proprietary filter property to, if you will, fake a gradient.

So if I save this, go back into my browser, and refresh this page, there is our new gradient, and that looks fantastic. Now I mentioned that we also need to do a hover and a focus. And I'm going to show you how fast this gradient editor can make you. I'm going to go back to my Gradient Generator, and I'm going to still work on the same gradient, so I'm selecting this gradient, then I'm going to tell that gradient to reverse. Reversing it just switches it, which is great for a rollover. I'm just going to go right back over to the code over here.

It's using the same settings that I've used before, and I'm just going to copy that. Go back into my Editor, and then inside the hover selector that we've already got there, just going to paste it. Now at the very bottom of that, I'm going to go ahead and change color, so I'm going to add the color property rgb, and this is the color of the text obviously, 212, 212, 225. So almost white, but not quite white, save that. And then finally, I also want to an active and focus style.

So I'm going to come back in, I'm going to reverse the direction of the gradient again, but this time I'm going to make a hue/saturation adjustment, I'm going to make it darker. I'm going to grab the Lightness value here, move that all the way down to about 30 or so, and you can see it change color. Once again, I'm going to come back up, copy this, move back over, and paste that code into the focus and active selector. I'm also going to do one more little thing here which is change color there as well, and the color I'm going to give that there is just white.

So I'm going to save that, I'll clean up my code again by applying source formatting. If your code editor has that feature I recommend it because it will help tame this code little bit. That's really it. That's why I love this tool. It's so easy to use, but don't let that stop you from learning the syntax and learning how this is supposed to be constructed, because occasionally you're going to go back in there and tweak the syntax. So make sure you at least read up on how the syntax works. So after I save that, I'm going to come back into my buttons, I'm going to refresh this page. There is our hover state, very nice, and notice if I click and hold mouse down on this button, there is the active state.

Also, if I tab through it, I get the active state as well. So take this method of using buttons, kind of play around with it a little bit, create your own buttons, experiment with the formatting, and see what you can come up with. That's one of the things that I love about these new CSS3 properties, they allow your creativity to shine.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 18195 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Navigation.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.