css border box around my button ?

[chris_angell]

hello i have a button in css and i am trying to get a coloured border around it.. i am using background-color: it only puts a box just around the edge but i would like a box with border and padding ?? any ideas how i can do this....

this link may help,, this shows what i am trying to do<<
http://www.moocowmedia.co.uk/images/example.gif


here is my css..

a.Buttons {
font-family: Trebuchet ms, verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #ffffff;
text-transform: lowercase;
text-align: left;
background-color: #1AC6F0;
text-decoration: none;
}
a.Buttons:hover {
font-family: Trebuchet ms, verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #000000;
text-transform: lowercase;
text-align: left;
background-color: #1AC6F0;
text-decoration: none;
border:2px;
}

[Arbitrator]

hello i have a button in css and i am trying to get a coloured border around it.. i am using background-color: it only puts a box just around the edge but i would like a box with border and padding ?? any ideas how i can do this....It would be helpful to see in what context you’re trying to create this effect and to explain what you want better.

I can tell you right now that your second rule likely contains an error. border: 2px; is not sufficient to declare a border; you need to also declare a border style (e.g., border: 2px solid;). If case you’re still stuck on basics, to add padding, you would use the padding property.

If you’re trying to apply borders and padding to an inline element and are looking for a way to make the top and bottom borders and padding affect the surrounding layout, then you would use the CSS2.1 display: inline-block declaration. Unfortunately, lack of or poor support in current releases of Firefox and Internet Explorer effectively block its use.

a.Buttons {
font-family: Trebuchet ms, verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #ffffff;
text-transform: lowercase;
text-align: left;
background-color: #1AC6F0;
text-decoration: none;
}
a.Buttons:hover {
font-family: Trebuchet ms, verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #000000;
text-transform: lowercase;
text-align: left;
background-color: #1AC6F0;
text-decoration: none;
border:2px;
}The redundancy of this code could be reduced significantly.

a.Buttons {
background: #1ac6f0;
color: white;
text-align: left;
text-decoration: none;
text-transform: lowercase;
font: 11pt Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}
a.Buttons:hover {
border: 2px solid;
color: black;
}