Wednesday, December 21, 2011

Colored Buttons




Open the file in Dreamweaver. Select either "Code" or "Split" view.



Put your cursor where you would like the buttons to appear and paste this code,
<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>

If you would like your buttons to be on the right side of the page you will need to wrap this div around them,
<div style="float:right; margin-top:7px; margin-left:15px;">
</div>

Here is what that code would look like,
<div style="float:right; margin-top:7px; margin-left:15px;">
<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_green">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_orange">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
<p style="margin-top:7px;" id="smallBtn_purple">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>
</div>

To change the text on the buttons select "Your Button Name" and type over it what you would like. Look at the blue text below for an example.
<p style="margin-top:7px;" id="smallBtn_blue"> <a style="text-decoration:none;" href="#">Your Button Name</a></p>

To link your button select the "#" and type over it where you would like it to link to. Look at the blue text below for an example.
<p style="margin-top:7px;" id="smallBtn_blue">
<a style="text-decoration:none;" href="#">Your Button Name</a></p>

Please feel free to email me if you have any questions, gauntzd@wou.edu.