CODEWITHSUNDEEP
htmlcsssubmitsemantics
Morten
Morten

Reputation:

Proper way to emphasize html submit button?

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 - ?

Upvotes: 3

Views: 5661

Answers (9)

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

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:

  • larger font size (font-size: 120%)
  • bold text (font-weight: bold)
  • padding (more horizontal than vertical, e.g. 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.

Upvotes: 0

ojrac
ojrac

Reputation: 13421

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.

Upvotes: 6

Alohci
Alohci

Reputation: 82976

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.

Upvotes: 0

AnonJr
AnonJr

Reputation: 2757

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.

Upvotes: 0

ATorras
ATorras

Reputation: 4293

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

Upvotes: 1

fforw
fforw

Reputation: 5491

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..

Upvotes: 1

Ben Blank
Ben Blank

Reputation: 56572

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.)

Upvotes: 1

Cerebrus
Cerebrus

Reputation: 25775

I would use an Image Button... no emphasis can match the beauty of a well designed icon...

"A picture is worth a thousand words!"

Upvotes: 0

Christian Schlensker
Christian Schlensker

Reputation: 22478

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.

Upvotes: 2

Related Questions