HTML and CSS RSS HTML and CSS RSS

Refer to button text via CSS

Reply

•
•
Join Date: Oct 2008
Posts: 56
Reputation: konczuras is an unknown quantity at this point 
Solved Threads: 1
konczuras konczuras is offline Offline
Junior Poster in Training

Refer to button text via CSS

 
0
  #1
Mar 21st, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 25
Reputation: claritydigital is an unknown quantity at this point 
Solved Threads: 2
claritydigital's Avatar
claritydigital claritydigital is offline Offline
Light Poster

Re: Refer to button text via CSS

 
0
  #2
Mar 21st, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 56
Reputation: konczuras is an unknown quantity at this point 
Solved Threads: 1
konczuras konczuras is offline Offline
Junior Poster in Training

Re: Refer to button text via CSS

 
0
  #3
Mar 22nd, 2009
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!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,315
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 161
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Refer to button text via CSS

 
0
  #4
Mar 22nd, 2009
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.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2009
Posts: 25
Reputation: claritydigital is an unknown quantity at this point 
Solved Threads: 2
claritydigital's Avatar
claritydigital claritydigital is offline Offline
Light Poster

Re: Refer to button text via CSS

 
0
  #5
Mar 22nd, 2009
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!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,315
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 161
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Refer to button text via CSS

 
0
  #6
Mar 23rd, 2009
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.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 174
Reputation: Jen0608 can only hope to improve 
Solved Threads: 10
Jen0608 Jen0608 is offline Offline
Posting Whiz

Re: Refer to button text via CSS

 
-2
  #7
Mar 23rd, 2009
thanks for the codes bob...
internet marketing services
 | website design

gate valves
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2009
Posts: 1,315
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 161
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso

Re: Refer to button text via CSS

 
0
  #8
Mar 25th, 2009
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,
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC