Join James Williamson for an in-depth discussion in this video Creating CSS-only buttons, part of CSS: Styling Navigation.
- View Offline
- Exercise Files
- Code Practice
In our last chapter we're going to focus on ways that we can enhance our navigation through multiple CSS techniques.…With the recent focus on designing for multiple screens and devices, it's becoming increasingly…important for designers to look for ways that CSS can make their sites more lightweight and flexible.…Now, thankfully some of the more recent CSS capabilities greatly expand our ability to…create artwork with just CSS. Take this button, for example.…Now, in the past we'd have to rely on background images and lots of non-semantic markup to create it.…
Well, now we can create it through pure CSS.…So over the next few exercises we're going to create this button and explore some of CSS' newest features.…So I've opened up the buttons.htm file from the 06_01 folder, and I wanted to show you…the two elements on the page that we're going to be styling.…We have an input submit, which is just the submit button you see on forms, and they typically…are going to display a browser's default styling.…And then we also have just a regular link on the page, for whatever reason, maybe it's…
- Organizing menus with lists
- Creating block-level links
- Styling links, link states, and image links
- Defining link dimensions
- Controlling link spacing in a menu
- Creating rollovers
- Clearing floats
- Indicating current pages
- Controlling cursor states
- Building dropdown menus
- Creating CSS-only buttons
Skill Level Beginner
1. Structuring Navigation
2. Link Styling Basics
3. Creating a Vertical Menu
4. Creating Horizontal Menus
5. Dropdown Menus
6. Enhancing Navigation with CSS
Additional resources6m 29s
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.