DeveloperBarn Forums

DeveloperBarn

Programming & IT forum

Button Class

This is a discussion on Button Class within the HTML & CSS Help forums, part of the Web Design category; At the moment I'm using images for my image buttons, but I thought I might try and achieve a similar ...

Go Back   DeveloperBarn Forums > Web Design > HTML & CSS Help

Button Class Button Class

Register FAQ Social Groups Calendar Search Today's Posts Mark Forums Read

Reply
Page 1 of 2 1 2

 

LinkBack Thread Tools Display Modes
  #1  
Old February 26th, 2009, 09:54 AM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default Button Class
At the moment I'm using images for my image buttons, but I thought I might try and achieve a similar effect by using a class on a button.

What I'm aiming for is something like the attached image.

This is the CSS I have so far, but there is a gap between the background image (which is just the green box with the white > arrow in it, positioned to the right) and the border.

Code:
.button_green { 
height:21px; 
border:solid1px#325CAB; 
border-collapse:collapse; 
padding:0px18px0px0px; 
margin:0px0px0px0px; 
background-color:#FFFFFF; 
background-image:url('/images/button_border_green.gif'); 
background-position:right; 
background-repeat:no-repeat; 
font-family: "Arial","Verdana"; 
font-size:10pt; color: #000066; 
text-decoration:none; 
font-weight:bold; 
}
Any ideas how I can get the background image flush with the border?

<edit>Actually it seems to be working pretty well in FF. Just not in IE.</edit>
Attached Images
File Type: gif form_add1.gif (1.1 KB, 16 views)
__________________
Join the folding team
Reply With Quote
  #2  
Old February 26th, 2009, 10:00 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,962
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
Try setting the padding to 0
__________________
jmurrayhead
If you agree with me... click the icon!
If my post solved your problem, click the button in the lower right-hand corner of the post.

If you like it here...throw us a few bones to help support us.

Join our Folding team: DeveloperBarn Folding
Reply With Quote
  #3  
Old February 26th, 2009, 10:04 AM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default
Quote:
Originally Posted by jmurrayhead View Post
Try setting the padding to 0
The reason for the padding was to make sure the button text doesn't write over the top of the background image.

However, if I set the padding to 0px, there is still a gap between the bg image and the border....
Reply With Quote
  #4  
Old February 26th, 2009, 10:07 AM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default
Attached is the button I get using the CSS I posted..
Attached Images
File Type: jpg add_button.jpg (3.6 KB, 15 views)
Reply With Quote
  #5  
Old February 26th, 2009, 10:11 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,962
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
A suggestion...

Since you're doing .Net, use a LinkButton instead of a Button and then style like demonstrated here: CSS Buttons [Sophie&rsquo;s maze]
Reply With Quote
  #6  
Old February 26th, 2009, 10:31 AM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default
Have used the same CSS on a linkbutton and that seemed to work pretty well...

Was kind of hoping to get the text movement when the button is clicked in IE, but as you don't seem to get that in FF, I'm not too bothered.

Any ideas on maybe adding the drop shadow, like the original image I posted?

At least it should save me having to create a new button image for each button type I want.
Reply With Quote
  #7  
Old February 26th, 2009, 10:38 AM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,962
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
Try something like this: A List Apart: Articles: CSS Drop Shadows
Reply With Quote
  #8  
Old February 26th, 2009, 11:30 AM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default
OK. After a bit of fiddling, that seems to work reasonably well...Spot on in IE and only a tiny bit out in FF with the shadow on the right.
This is what I ended up with
Code:
<span class="drop_shadow" style="float:right">
<span>
<asp:linkbutton />
</span>
</span>
CSS
Code:
.drop_shadow { float:left;
background: url('/images/drop_shadowAlpha.png') no-repeat bottom right !important;
background: url('/images/drop_shadow.gif') no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px; }
.drop_shadow span { display: block;
position: relative;
margin: -5px 5px 5px -5px;
padding: 2px 0px 0px 1px;
}
The original css was affecting my button class, so I had to add in another span as a holder for the link button.
Last edited by richyrich; February 26th, 2009 at 11:33 AM.
Reply With Quote
  #9  
Old February 26th, 2009, 02:06 PM
richyrich's Avatar
Administrator
  
Join Date: Mar 2008
Real name: Rich
Location: Somewhere only we know...
Posts: 1,342
Blog Entries: 6
Rep Power: 8
richyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to allrichyrich is a name known to all
Default
OK. Have come up with a problem with the height of the button.

The background image I'm using is 22px high.

I have to set the height of the linkbutton. If I change the height in the CSS it has no effect.

However, when I set the height to 20px, the text is not vertical aligning to the middle. I've tried adding vertical-align:middle; to the CSS and as a style on the linkbutton but it just stays at the top.

If I remove the height attribute of the linkbutton, it defaults to an auto height and the text sits in the middle, but I want to make the button higher. I can't add padding to the CSS because that puts a gap between the background and the border.

Any ideas?
Last edited by richyrich; February 26th, 2009 at 02:09 PM.
Reply With Quote
  #10  
Old February 26th, 2009, 02:18 PM
jmurrayhead's Avatar
The Barnfather
  
Join Date: Mar 2008
Real name: Jason
Location: Washington, D.C.
Posts: 1,962
Blog Entries: 8
Rep Power: 15
jmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud ofjmurrayhead has much to be proud of
Default
What if you set a lineheight? (i.e. line-height: 2em; )

Comments on this post
richyrich agrees: Thanked Post
Reply With Quote
The Following User Says Thank You to jmurrayhead For This Useful Post:
richyrich (February 26th, 2009)
Reply
Page 1 of 2 1 2

  DeveloperBarn Forums > Web Design > HTML & CSS Help

Bookmarks

Tags
button, class, css

« Previous Thread | Next Thread »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads

Thread Thread Starter Forum Replies Last Post
class name is ambiguous richyrich .Net Development 11 August 12th, 2008 11:11 AM
Generic Paging Class Shem .Net Development 4 July 18th, 2008 11:29 AM
FTP Class Library? Wolffy .Net Development 6 May 30th, 2008 10:26 AM
Class library Shem .Net Development 11 May 22nd, 2008 07:01 AM
delete button techker Microsoft Access 14 May 21st, 2008 08:56 AM


All times are GMT -4. The time now is 06:20 PM.

Contact Us - DeveloperBarn.com - Top

Copyright ©2008-2010, DeveloperBarn

Content Relevant URLs by vBSEO 3.3.2