Steps of Building Navigation Buttons

Posted by: Ping

Steps of Building Navigation Buttons – Option-A

1. Create a CSS3 rule for the navigation buttons: .nav_li
<nav>
<ul>
<li class=”nav_li“>Home</li>
<li class=”nav_li“>Navigation</li>
<li class=”nav_li“>Layout</li>
<li class=”nav_li“>Type</li>
<li class=”nav_li“>Image</li>
<li class=”nav_li“><Sitemap</li>
</ul>
</nav>

2. Set a button size: W: 125 / H: 25
3. Window > CSS Properties panel
4. Choose the Rounded Rectangle Tool
5. Switch to Point tool to drag the border rounder
6. Add gradient for the buttons: click the gradient button of properties panel to select colors
7. Add shadow for the buttons: Filters > Shadow and Glow > Inner Shadow
(double click the inner shadow button to adjust values)
8. Add another Drop Shadow
9. Copy Select all CSS3 properties, and paste them into the CSS document

CSS3 Buttons: http://pxstudio.us/workshop/dwwk-css3/home.html