Refer to button text via CSS

[konczuras]

Hello!

I was wondering if there's any way to refer to a button's text in css. More accurately, to define to classes for a button, one for the button body, and one for the text inside it. Like:

.button{
//the settings of the button
}

.button: p
{
//text layout
}

Is there any method (eg. using spans, etc...)?

Thanks in advance!

[claritydigital]

Hi there,
You would do what you have done, and create a class, and simply state the attibutes you would like to attribute to the text/font. Because a form submit button is a type of input field you cannot add tags like <span>, or <p> to it, because its text is contained within the value of the input field.

But i get the hunch you are trying to achieve something specific, so if you care to ellborate, please do so:)...

Cheers!

Clarity

[konczuras]

Hi,
thanks for your answer.
So, is there any way to access to the text? ( eg. can I set different background-color to the button body and the text?)
Thanks in advance!

[almostbob]

button { color:#ff0000; background-color: #e4e0d8; } 
button:hover { color:#000000; background-color: #66cdaa; } 
button:active { color:#ff00ff; background-color: #66cdaa;  }
button:focus { background-color: #66cdaa; }
/* or */
input[type=button] { color:#ff0000; background-color: #e4e0d8; }
input[type=button]:hover { color:#000000; background-color: #66cdaa; }
input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
input[type=button]:focus { background-color: #66cdaa; }</style>

buttons are accessed as are any other elements, it isnt obvious that the button caption is just text
and can be css-ed as a span <button><span style='whatever' or class='whatever'>button text</span></button>

[claritydigital]

wowzah... Ive never seen css like this:

input[type=button] { color:#ff0000; background-color: #e4e0d8; }
input[type=button]:hover { color:#000000; background-color: #66cdaa; }
input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
input[type=button]:focus { background-color: #66cdaa; }

'

Didnt know you could do that. How amazing. Thanks!!

[almostbob]

what can I say, I like turquoise
mouseovers
most elements have four css states
many have more

@media print { 
.dontprint { display:none; } 
p { padding: 1px; font-size: 100%; list-style-type: square; }
}
@media screen ( 
.dontshow { display:none; }
p { padding: 1px; font-size: 100%; line-height:125%; list-style-type: square; }
p:first-line { font-weight:bold; }
p:first-letter { font-size:200%; float:left; } 
}

Drop Caps bold first line paragraphs on screen, plain text on paper
class dontshow/print dont display on screen/paper change layouts to suit media
onscreen forms have a captcha field to verify, printed versions have a signature line

what you can do is limited by what you can imagine

[Jen0608]

thanks for the codes bob...

[almostbob]

Somewhat off topic

off track, my 1 css file contains 4 state definitions for a heap of tags, its HUGE for css
trying to get my FIRST page to load fast, subsequent ones load the cached css and js, zoom, discovered apache mod_deflate mod_gzip, marvelous invention

DANGER attempted humor If (apache config) {enable mod_deflate | mod_gzip, for all text files} else { gzip with asp or php } remarkable load time difference,