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:

PLAIN TEXT

HTML:



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

PLAIN TEXT

CSS:



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

PLAIN TEXT

CSS:



.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

PLAIN TEXT

CSS:



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

Tags or categories or topics...

Lots of ramblings on this blog...might be easier for you to find your juice through these tags:

Voices from the crowd, 11 so far

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;
}

by Priit Pirita
1 day, 11 hours after the post

display:block and 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.

by Aleksandar
4 days, 22 hours after the post

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.

by Priit Pirita
5 days, 21 hours after the post

Heh, interesting.

I tried to place font-family:inherit on 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…

by Aleksandar
5 days, 21 hours after the post

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

by sam
1 week after the post

Calibri is one of the 5 C fonts that Microsoft introduced with Vista. They are great fonts, and all look great on screen.

by Aleksandar
1 week after the post

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.

by Daniel
2 months, 1 week after the post

[…] Rounded Form Buttons […]

by 15 Tips and Techniques for Styling the button element : Speckyboy Design Magazine
1 year, 6 months after the post

[…] […]

by 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine
1 year, 6 months after the post

by 15 Tips and Techniques for Styling the Button Element « Extreme Design Studio Blog v4.0
1 year, 7 months after the post

by 35+ Essential Submit Button Enhancements | tripwire magazine
1 year, 8 months after the post

Rounded form buttons

Step 1 — remove default styles

Step 2 — enclosing element

Step 3 — actual button

Problems

Voices from the crowd, 11 so far

Post your opinion

Related posts (possibly)

Rounded corners

Contact form fixed

iPhone developer program enrollment doesn’t work?

MX900 mouse and whole lot more">How to switch buttons on MX900 mouse and whole lot more

Styling form fields

Validating forms

Tags or categories or topics...