Rounded form buttons
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:
<div class="buttons">
<strong>
<input type="submit" value="Continue →" />
</strong>
<span class="lesserbtn">
<input type="submit" value="Cancel" />
</span>
</div>
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.
.buttons {
line-height: 1;
}
.buttons input {
line-height: 1;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
}
Step 2 – enclosing element
Now, let’s start with the styles for the button first.
.buttons strong, span.btn {
background: url(btn-round.png) no-repeat left;
padding: 1em 0 1em 5px;
margin-right: 10px;
cursor: pointer;
}
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
.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;
}
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.