Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Styling button with no fixed width. 1

Status
Not open for further replies.
HestonJames

HestonJames

Programmer
Aug 11, 2008
187
GB
Hello Guys,

I'm looking for a little help styling a button element on a form, something like this:

Code: 
<button type="submit" name="submit" id="SendEnquiry" accesskey="s">
   <em>s</em>end my message!
</button>

Now, I want the button to look like this:

blue_button.png


Now, the button is of no fixed width as I want this to be a general style so I can add any old text into the button and it'll scale nicely, the height however can be fixed, I'm not worried about that.

So, I thought I would start by splicing the images up like this:

blue_button_left.png


blue_button_right.png


This should give me the stuff I need to get the button so it scales nicely.

Can anyone suggest the CSS and HTML mods I'll need to get this button looking right? I'm guessing I'll need to add some <span> or something into the button element to create the sliding doors style background effect and make the button look complete.

My best efforts so far look like this:

Code: 
							<button type="submit" name="submit" id="SendEnquiry" accesskey="s">
								<div>
									<em>s</em>end my message!
								</div>
							</button>

button {
	border:none;
	padding:0 24px 0 0;
	background:url('../images/blue_button_right.png') top right no-repeat;
}
	
button div {
	padding:17px 0 17px 24px;
	font-size:22px;
	color:#fff;
	background:url('../images/blue_button_left.png') top left no-repeat;
}

This almost works but it creates a funny kink in the button where the images dont quite match up properly, like so:

button_broken.png


Thanks guys, I appreciate any advice.

Heston
 
Sort by date Sort by votes
Not the most semantic thing ever. But it works.

I actually made a third image, but if you want to use only 2. You can by using only 2 divs, and having the text inside the left div. The rest should work exactly the same.

Code: 
<div style="height:62px;">
  <div style="float:left; height:100%; width:15px; background:URL('blue_button_left.png'); ">
  </div>
  <div class="btn_text" style="float:left; height:100%; line-height:60px; font-family:Arial; font-size:20px; color:#FFFFFF; background:URL('blue_button_center.png');">
     BUTTON TEXT GOES HERE
  </div>
  <div style=" float:left; height:100%; width:27px; background:URL('blue_button_right.png');">
  </div>
</div>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Personally, I'd either design a button that scales without using more than one image (perhaps just a top->bottom gradient / border or a left->right gradient / border), or I'd use an image input. At least with the latter method, you can guarantee it'll look the same across all browsers & OSes (e.g. Safari, etc).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Good morning Guys,

Thank you for the suggestions.

@ vacunita - you're quite right, this method is pretty verbose but it does work so perhaps is an options, I'll spend a little time playing around with it.

@ BillyRayPreachersSon - I do know what you mean, I'm usually a fan of making things as scalable as possible but liked to try and squeeze a dropshadow in on this one.

I will however look into styling an input rather than a button element if that is likely to make things a little more browser compatible.

Thanks for the advice, I'll keep you both posted on my progress.

Heston
 
Upvote 0 Downvote
I'd stick with your existing "sliding doors" approach, though maybe consider an <a> element instead of a <button> (though it would introduce a javascript dependency).

Dunno where that 1 pixel jog comes from, probably some side effect of the <button> needing room to be pressed down. I found one solution was to add a second <div>:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
  <title>Button Test</title>

  <style  type="text/css">
button {
    border:none;
    background: none;
}
button div {
    padding:0 24px 0 0;
    background:url('[URL unfurl="true"]http://i298.photobucket.com/albums/mm249/SirRawlins/blue_button_right.png')[/URL] top right no-repeat;
}
    
button div div {
    margin: 0;
    padding:17px 0 17px 24px;
    font-size:22px;
    color:#fff;
    background:url('[URL unfurl="true"]http://i298.photobucket.com/albums/mm249/SirRawlins/blue_button_left.png')[/URL] top left no-repeat;
}
  </style>
</head>
<body>
  <button type="submit" name="submit" id="SendEnquiry" accesskey="s">
    <div><div>
      <em>s</em>end my message!
    </div></div>
  </button>
</body>
</html>


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Chris,

That approach works really well!! I've just dropped it in and it seems to behave itself very nicely!

Thank you.

Heston
 
Upvote 0 Downvote
Say Chris,

I don't suppose you could take a look at this thread for me? I have a very similar problem in the page too, I cant get the centre 'I'm interested' button to line up properly.

I don't seem to have much joy with the sliding doors concepts, they seem to work fine in a clean environment but as soon as I put them into a document with other elements they fall to pieces ;-)

Cheers,

Heston
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
689
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
760
spamjim
spamjim
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
701
PeDa
PeDa
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
130
CoolBreeze007
CoolBreeze007

Part and Inventory Search

Sponsor

Back
Top