943,832 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Refer to button text via CSS
Ad:
Permalink
Mar 21st, 2009
0

Refer to button text via CSS

Expand Post »
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:

css Syntax (Toggle Plain Text)
  1. .button{
  2. //the settings of the button
  3. }
  4.  
  5. .button: p
  6. {
  7. //text layout
  8. }

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

Thanks in advance!
Last edited by peter_budo; Mar 21st, 2009 at 3:07 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Similar Threads
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
konczuras is offline Offline
59 posts
since Oct 2008
Permalink
Mar 21st, 2009
0

Re: Refer to button text via CSS

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
Reputation Points: 6
Solved Threads: 2
Light Poster
claritydigital is offline Offline
25 posts
since Mar 2009
Permalink
Mar 22nd, 2009
0

Re: Refer to button text via CSS

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!
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
konczuras is offline Offline
59 posts
since Oct 2008
Permalink
Mar 22nd, 2009
0

Re: Refer to button text via CSS

css Syntax (Toggle Plain Text)
  1. button { color:#ff0000; background-color: #e4e0d8; } 
  2. button:hover { color:#000000; background-color: #66cdaa; } 
  3. button:active { color:#ff00ff; background-color: #66cdaa;  }
  4. button:focus { background-color: #66cdaa; }
  5. /* or */
  6. input[type=button] { color:#ff0000; background-color: #e4e0d8; }
  7. input[type=button]:hover { color:#000000; background-color: #66cdaa; }
  8. input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
  9. 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>
Last edited by almostbob; Mar 22nd, 2009 at 3:27 pm.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Mar 22nd, 2009
0

Re: Refer to button text via CSS

wowzah... Ive never seen css like this:

HTML and CSS Syntax (Toggle Plain Text)
  1. input[type=button] { color:#ff0000; background-color: #e4e0d8; }
  2. input[type=button]:hover { color:#000000; background-color: #66cdaa; }
  3. input[type=button]:active { color:#ff00ff; background-color: #66cdaa;  }
  4. input[type=button]:focus { background-color: #66cdaa; }
'

Didnt know you could do that. How amazing. Thanks!!
Reputation Points: 6
Solved Threads: 2
Light Poster
claritydigital is offline Offline
25 posts
since Mar 2009
Permalink
Mar 23rd, 2009
0

Re: Refer to button text via CSS

what can I say, I like turquoise
mouseovers
most elements have four css states
many have more
css Syntax (Toggle Plain Text)
  1. @media print { 
  2. .dontprint { display:none; } 
  3. p { padding: 1px; font-size: 100%; list-style-type: square; }
  4. }
  5. @media screen ( 
  6. .dontshow { display:none; }
  7. p { padding: 1px; font-size: 100%; line-height:125%; list-style-type: square; }
  8. p:first-line { font-weight:bold; }
  9. p:first-letter { font-size:200%; float:left; } 
  10. }
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
Last edited by almostbob; Mar 23rd, 2009 at 2:12 am.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Mar 23rd, 2009
-2

Re: Refer to button text via CSS

thanks for the codes bob...
Reputation Points: -30
Solved Threads: 10
Junior Poster
Jen0608 is offline Offline
179 posts
since May 2008
Permalink
Mar 25th, 2009
0

Re: Refer to button text via CSS

HTML and CSS Syntax (Toggle Plain Text)
  1. 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,
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: stop html background image cutting off at lower resolutions
Next Thread in HTML and CSS Forum Timeline: Leave sidebar and title bar but change main content





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC