To be precise, the submit buttons: input type="submit". Very often designers want to somehow emphasize these buttons and are not very pleased with an answer “well, how about bold and colored caption?” :)
Recently, at the office, I had client request to create a design like this:
The HTML I had already was like this:
There was no chance to change this into anything drastically different as bunch of server-side code depended on form submit buttons being input elements. Thus, I went with this code and looked for CSS solutions.
One really helpful fact was that all captions were one line of code. Thus, I was able to use one long image with rounded corners. I had two nested elements as well, which is enough to get the design up.
Basic idea I had was to put background image on both the input and its parent element, both aligned to opposite corners.
Step 1 — remove default styles
This is fairly easy, but necessary.
Step 2 — enclosing element
Now, let’s start with the styles for the button first.
This is left side of the button. Note the use of vertical paddings. Since this is inline element, they do nothing to the text but they do expand inline box. That way, background graphic is fully revealed.
Step 3 — actual button
Same thing for internal element, but this one is forced 5px to the right to reveal the rounder corners of the previous element.
And that’s it. Fairly simple and mostly works ok. Here’s an example page.
Problems
It’s strange that it does not work ok with all fonts. Example page shows that when Calibri is used, images don’t always line up. In Safari, they don’t fully line up even for Helvetica Neue. They do line up for Verdana, Georgia, Arial. In Opera 9.5 Calibri example is the worst.
Second problem is that in some cases, when larger font sizes are used, images again don’t line up.
Amazingly, the only browser I didn’t have an issue with is IE, both 6 and 7.
I could not get to the bottom of this. If anyone have any ideas, please share. Inline box is a very complicated issue and I’m sure there’s something I’m missing.
try this:
.buttons strong, span.btn {
background: url(btn-round.png) no-repeat left;
padding: 1em 0 1em 5px;
margin-right: 10px;
cursor: pointer;
display: block;
width: 15px;
}
/* now actual buttons */
.buttons strong input, span.btn input {
color: #000;
background: url(btn-round.png) no-repeat right;
margin: 0 –5px 0 0;
padding: 1em 10px 1em 5px;
border: 0;
cursor: pointer;
display: block;
}
display:blockand short width does help with alignment, but unfortunately forces remaining part of the text into second line (like that Cancel button I have on the example page).The perfect solution here would be inline-block, which is not widely supported yet.
Yeah, should have figured that out earlier. The devil here’s is the inline blocks, where text alignement depends from fonts baseline. Baseline is slightly different in diffrent fonts ( I mean how many % below and how many % above the baseline). So the solution is to give input element same font family as outer div’s. Currently you have default font there.
Heh, interesting.
I tried to place
font-family:inheriton lower (problem) example and that resolved the issue. However, it then created inverted problems at the top — now it’s misaligned on the top edge. :)Some creepy stuff happening here…
regarding Calibri font; is that a web supported font anyway? If not, no wonder why it doesn’t work on regular browser. The same goes with Helvetica Neue (though i love it).
Calibri is one of the 5 C fonts that Microsoft introduced with Vista. They are great fonts, and all look great on screen.
Passing through. The problem is your line-height not being applied to your inline elements. This is the same issue as when you float a span to the right in a navigation and are noticing the right span being kicked-up higher than the rest of the navigation.
Set your line-height for every element you wish to use, and that might solve the problem.
Hope that helps.