Help - Search - Members - Calendar
Full Version: Text color within a button (?) confusion
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
jgibson
I wanted to change the color of the text in my button. The theme I was using defaulted to a red color font, but for a specific button, I wanted the text to be whit. What is the difference between the two examples below? They both have the same end result, as far as I can tell. Is there a "best practice"? If so, why?

I'm just trying to gain a better understanding for the future. The URL in question is: http://wp.me/P4yEpa-w


Example 1
<button>
<a href="#"><span style="color: #ffffff;">Text</span></a>
</button>

Example 2
<button>
<a href="#"><font color="ffffff">Text</font></a>
</button>
Frederiek
The FONT tag is deprecated, and thus shouldn't be used.
An A tag inside a BUTTON tag is not allowed.
See http://htmlhelp.com/reference/html40/forms/button.html on the proper use of BUTTON.
pandy
You've also forgot the hash sign before the color value in the link example.

You don't need any extra tags to hang the styling on. The proper way to do it is like this.

This goes in your external style sheet or a style block in HEAD.
CODE
button   { color: white; background: red }



HTML
<button>
Text
</button>



Or if you prefer inline CSS, but it's really more bothersome.

HTML
<button style="color: white; background: red">
Text
</button>
jgibson
I was able to find the text color on the theme's style sheet and change it to white. So then, is this correct?

<FORM METHOD="LINK" ACTION="#">
<INPUT TYPE="submit" VALUE="button text">
</FORM>
Christian J
QUOTE(jgibson @ May 8 2014, 05:27 PM) *

I was able to find the text color on the theme's style sheet and change it to white.

Don't forget to change background as well, to avoid potential situation where white text color appears over white background.

QUOTE
So then, is this correct?

<FORM METHOD="LINK" ACTION="#">
<INPUT TYPE="submit" VALUE="button text">
</FORM>

No, there's no METHOD="LINK". Use this instead: http://htmlhelp.com/faq/html/links.html#button-link
pandy
Are you using that instead of BUTTON now, or what?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.