If you absolutely have to style your html buttons, what is the correct way to emphasize some of them? e.g. "Add to cart" is usually emphasized visually to make it stand out.
Option 1 - wrap submit in em or strong + css
Option 2 - class + css
Option 3 - ?
A class would probably be you're most flexible solution. If you want to do anything more than just bold or italic then you are going have to use some sort of class/id anyway.
If you have this item in a container however, then you could just use that container to select your button.
html
<div class="foo">
<input type="submit" />
</div>
css
.foo input
{
...some styles
}
Putting the class on the input is perfectly acceptable though. The previous method is only if you already have the button in a container and you don't want to add any extra markup.
I would use an Image Button... no emphasis can match the beauty of a well designed icon...
"A picture is worth a thousand words!"
CSS is the way to go. For example, on the Facebook "Notes" application, the "Publish" button is in strong blue, and the others are in grey. That's all done with CSS classes and IDs.
Ultimately, you should just look for a site you trust, if you want a second opinion on CSS. Tools like Firebug make it easy to see exactly how they do their styling.
Well, if you're looking to emphasize a button, I'd say the most semantic representation is to wrap your <button> tag (or <input type="submit"> or whatever you're using) in <em> tags and style it in CSS, e.g.:
em button {
color: blue;
font-style: normal;
font-weight: bold;
}
(Remember that, while italics and bold may be the default visual styles for <em> and <strong> in most browsers, that's just convention. If you aren't "strongly" emphasizing something, just use <em> even if you want it displayed bold.)
The correct and semantic way would be
<button><em>label</em></button>
but since IE does not support multiple elements you have to use <input type="button"> -- and wrapping that in an em or something is bad.
I'd strongly prefer
<input type="button" class="emphasized"/>
or something..
Hi,
With CSS2+ you could use option 3: Only CSS
input[type="submit"] {
border: 3px solid blue;
}
More info: http://www.w3.org/TR/CSS2/selector.html
Ask an open question, get a bunch of correct-but-different answers...
Most people just go for an image as the button as that bypasses a lot of browser issues. You know it will look the same on every browser.
You can use CSS to style the element you use to submit. Going that route, you can use the <input type="submit"> and style appropriately, or you can use <button type="submit">[lable goes here]</button>. I prefer the latter as its easier to style, but that's largely a personal preference.
Best advice is to look around and when you see something like what you want, look at how they did it.
A good way to think about these kinds of issues is to consider what you'd want from an aural browser. In this case, if your page is being read out, would you also want the button to emphasized by a different tone or volume of voice from the other buttons. If so, you should use semantic markup to indicate that this is emphasis and not just presentation.
<em> should really be used to emphasize individual words to indicate the where the stress should be placed in a sentence, so unless your button appears in the middle of sentence, I would prefer wrapping the input element in <strong> rather than <em>.
In addition, you can add CSS to get the visual effect you want.
A lot of sites use images. One problem with that can be inconsistency - you have to make all of your buttons images, or none of them or some will look out of place.
I generally go for:
font-size: 120%)font-weight: bold)padding: 4px 8px)I don't change colours, because of the massive platform variations. Grey text might look fine for most people, but if the user is using a darker theme then the button background colour could make the text unreadable.
If you start changing any colours you'll need to set at least a color, background-color and border.