I have a question (hopefully the last one) about using CSS to make "Buttons".
I have the buttons made, and they are working fine. I want to "fine tune" some specific buttons without making redundent CSS classes that have all the same info, except for one changed field.
I want to make the font on one button a different color in the "normal" state only (as opposed to hover). How can I do this?
Also, even though I am using the width attribute, the text for one (big word I have to use) button goes "past" the actual button, and when I hover over it, the button then resizes to fit the text thus making the entire button menu look bad. How could I make it so that the text is smaller, but the button stays the same size?
Thanks, any help would be appreciated. Here is the code I am using.
a.button:link, a.button:visited, a.button:active
{
display:block;
width:6.5em;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}try this<style type="text/css">
<!--
a.button {
float: left;
padding: 0% 1em;
line-height: 1.4em;
text-decoration: none;
border: 4px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
}
a.button:link,
a.button:visited {
background: #CCC;
color: #063AA0;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
}
a.button:hover,
a.button:active,
a.button:focus {
background: #CCC;
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
-->
</style>That didn't work, but thanks for the help. Each button is inside a table cell, and as soon as I "hover" over the button, it pushes the entire cell out thus messing up the entire table.
Is there anyway to just change the text size, and nothing else?
Also, is there anyway to just change the color of one "button" while it is in the normal state?
Thanks!Basically, right now the button size is dependent on the font size. How do I get rid of that dependency so that the buttons stay the same size no matter how small the font is.
THANKS!trya.button {
float: left;
padding: 0% 1em;
overflow: hidden;
width: 100px;
line-height: 1.4em;
text-decoration: none;
border: 4px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
}Cool thanks, that overflow-hidden did the trick!
The only other thing I am wondering is how do I change the color of the text for one "button" when it is in the "link" or normal stage, then to have the same rollover effect as the rest of the buttons when the mouse "hovers" over it.
THANKS!
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
I have the buttons made, and they are working fine. I want to "fine tune" some specific buttons without making redundent CSS classes that have all the same info, except for one changed field.
I want to make the font on one button a different color in the "normal" state only (as opposed to hover). How can I do this?
Also, even though I am using the width attribute, the text for one (big word I have to use) button goes "past" the actual button, and when I hover over it, the button then resizes to fit the text thus making the entire button menu look bad. How could I make it so that the text is smaller, but the button stays the same size?
Thanks, any help would be appreciated. Here is the code I am using.
a.button:link, a.button:visited, a.button:active
{
display:block;
width:6.5em;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}try this<style type="text/css">
<!--
a.button {
float: left;
padding: 0% 1em;
line-height: 1.4em;
text-decoration: none;
border: 4px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
}
a.button:link,
a.button:visited {
background: #CCC;
color: #063AA0;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
}
a.button:hover,
a.button:active,
a.button:focus {
background: #CCC;
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}
-->
</style>That didn't work, but thanks for the help. Each button is inside a table cell, and as soon as I "hover" over the button, it pushes the entire cell out thus messing up the entire table.
Is there anyway to just change the text size, and nothing else?
Also, is there anyway to just change the color of one "button" while it is in the normal state?
Thanks!Basically, right now the button size is dependent on the font size. How do I get rid of that dependency so that the buttons stay the same size no matter how small the font is.
THANKS!trya.button {
float: left;
padding: 0% 1em;
overflow: hidden;
width: 100px;
line-height: 1.4em;
text-decoration: none;
border: 4px solid;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
}Cool thanks, that overflow-hidden did the trick!
The only other thing I am wondering is how do I change the color of the text for one "button" when it is in the "link" or normal stage, then to have the same rollover effect as the rest of the buttons when the mouse "hovers" over it.
THANKS!
a.button:link, a.button:visited, a.button:active
{
display:block;
width:100px;
height:30px;
float:left;
color: #063AA0;
background: #CCCCCC center center;
text-decoration: none;
text-align:center;
padding: 0.2em;
border: 4px solid;
border-color: #dfdfdf #6e6e6e #6b6b6b #dadada;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.4em;
overflow: hidden;
}
a.button:hover {
color: #fff;
border-color: #6b6b6b #dadada #dfdfdf #6e6e6e;
}