Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Creating CSS Graphics Buttons
Old 01-24-2007, 07:39 AM Creating CSS Graphics Buttons
Experienced Talker

Posts: 33
Trades: 0
Hey Guys,

I am just learning CSS and...!
I have questions:
I can't figure it out to create buttons from my own graphics( I created it using photoshop and make it gif) and also,
I want it when its hover, its change to the other graphics buttons.

for example:
http://www.tanyamerone.com/

the main navigation of that site and also can someone tell me where I can find css tutorials to create this kind of form
http://www.golfandsave.ca/buyamembership.htm
(select region form)

thanks guy
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-24-2007, 11:21 AM Re: Creating CSS Graphics Buttons
Skilled Talker

Posts: 94
Trades: 0
you say tanyamerone for an expamle? she doesnt use graphic buttons, just a CSS on hover background change color.

if you want to use graphics like that you could do it in CSS by changing background-color:#222, to background-image: blah blah.... thats the CSS way, i believe.
hellhound121 is offline
Reply With Quote
View Public Profile
 
Old 01-24-2007, 01:56 PM Re: Creating CSS Graphics Buttons
Tom_M's Avatar
Ultra Talker

Posts: 250
Name: Tom Maurer
Location: Pennslvania, USA
Trades: 0
That's all css my man. No images required.

Code:
a:link, a:visited, a:active, a:hover {
    color: #748685;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #dcebe9;
    border-top: 1px solid #fff;
}
a:hover {
    color: #2e3736;
    background-color: #d2eae8;
}
As far as the form goes, that is just a standard HTML form layed out in a table. CSS is used to style the form with background-color: #ffffa0

Last edited by Tom_M; 01-24-2007 at 02:08 PM..
Tom_M is offline
Reply With Quote
View Public Profile
 
Old 01-24-2007, 04:57 PM Re: Creating CSS Graphics Buttons
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
But, if you want to see the use of CSS and graphics for buttons, try viewing the code here: http://www.springshadowsfamily.com. CSS file is called main.css.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-24-2007, 08:18 PM Re: Creating CSS Graphics Buttons
Experienced Talker

Posts: 33
Trades: 0
Thanks guys for the Information about Tanya site

anyway, I am still curious to make a button from my graphics
hmmm i hope this example won't be wrong
http://www.bc.lung.ca/

like that horizontal main navigation but without the drop down menu.
I could't figure it out how you make it the text of the links invisible. horizontal, but still clickable and add some hover effect
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
Old 01-25-2007, 12:26 PM Re: Creating CSS Graphics Buttons
Brendan22's Avatar
Extreme Talker

Posts: 202
Name: Brendan
Location: ohio USA
Trades: 0
For rollovers, here's a quick handy form that does the CSS grunt work for you:

http://www.colly.com/scripts/rollover.html

And ther eare also these little gems:

http://www.exploding-boy.com/2005/12...cal-css-menus/

http://www.exploding-boy.com/2005/12...ation-designs/
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
Brendan22 is offline
Reply With Quote
View Public Profile Visit Brendan22's homepage!
 
Old 01-25-2007, 05:15 PM Re: Creating CSS Graphics Buttons
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
You do NOT want any 'invisible' links, search engines won't like you very much if you go hiding things like that.

For the horizontal navigation, use an unordered list for your menu items, set the <li> to display:inline. Set the background of the <a> items to be your button graphics (hover only works on links in IE 6 and below). The text for your buttons will be what's in the link.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 01-26-2007, 03:44 AM Re: Creating CSS Graphics Buttons
Experienced Talker

Posts: 33
Trades: 0
thanks guys and thanks lady for the advice

I really appreciate it!
Arch_Angel_X is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Creating CSS Graphics Buttons
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.92519 seconds with 12 queries