View Full Version : Buttons

08-26-2010, 01:30 AM
Alright I have searched everywhere and cannot find this. First go here:


Look at the buttons. See that you can edit the text on them, and when you hover your mouse over them they change.

I can design my own buttons and stuff, but I just need to learn how to do that. Does anyone have a link that teaches how? Thank you.

08-26-2010, 01:58 AM
They are using CSS.
This is the code that does it.
Read up on cascading style sheets.
This is the HTML

<div id="container">
<div id="menu">
<li class="current">
<a href="index.html"><span>home</span></a>

<li >
<a href="register.html"><span>register</span></a>

<li >
<a href="download.html"><span>download</span></a>

<li >
<a href="support.html"><span>support</span></a>

<!--<li >
<a href="forum.html"><span>forum</span></a>
<li >
<a href="forum"><span>forum</span></a>

<!--<li class="btn_login">
<a href="#" id="toggle-login"><span>login</span></a>

This is the CSS:

#menu a{position: relative; float: left; display: block; background: url("../images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: -6px 5px 0px 5px; padding: 4px 15px 0px 10px; height: 27px; background: url("../images/menuSpan.gif") bottom right;}

#menu a:hover{background: url("../images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("../images/menuSpan.gif") top right;}

08-26-2010, 02:11 AM
Decker, you do know you can view code of any page you visit. Well html and CSS. Right click ona page and click view source. This is a good way to get ideas and learn from other's coding. Also if you use firefox, download their web tools as add ons...They have lots of good tools for web development to help learn.

08-26-2010, 02:17 AM
Doesn't work. I copied and pasted them codes, and even got the correct images and it doesn't work.

08-26-2010, 02:21 AM
see teedoff's post. go to that page you linked to and save it to your desktop or somewhere you choose.

using your fav text editor, remove the page bit by bit until you are only left with the css and the menu you are interested in. See how the css relates to that html code and understand how it works.

That's the easiest and best way to understand.

08-26-2010, 12:31 PM
Alright i've got pretty far but there is like a bullet thing beside one of the buttons, I don't know what it is, look:


Can you tell me how to get rid of that?

08-26-2010, 12:49 PM
Add list-style:none; to ul and li in CSS

Off topic: Please follow #2 of http://www.codingforums.com/postguide.htm, regarding thread titles.

08-26-2010, 12:59 PM
Lol it worked, thanks alot.