There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot bsod computer connection cpu crash css dell desktop dma driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware hijackthis hjt install internet internet explorer itunes keyboard laptop macro malware monitor motherboard network networking outlook outlook 2003 outlook 2007 outlook express pio problem problems router seo server slow sound sp3 spyware trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Form button with two colours using CSS


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
sujeeth_it's Avatar
Junior Member with 23 posts.
 
Join Date: Mar 2006
Experience: Intermediate
20-Apr-2006, 07:13 AM #1
Thumbs up Form button with two colours using CSS
Hi all,

I want to know that can we give multiple colours to a form submit button or normal button using css like we will give width, border colour for it.

If possible please help me on that.

Regards,
Sujit Joshi
Rockn's Avatar
Computer Specs
Distinguished Member with 17,888 posts.
 
Join Date: Jul 2001
Location: Mexico of the North, MN
Experience: Disenfranchised American Male
20-Apr-2006, 08:41 AM #2
You can give a button a background and border colors using CSS...TRUE

.button {
background-color: #9999FF;
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: #999999;
border-right-color: #666666;
}
namenotfound's Avatar
Computer Specs
Distinguished Member with 2,102 posts.
 
Join Date: Apr 2005
Location: New York
Experience: I know what I know, I am
20-Apr-2006, 10:40 PM #3
You can also give it a different color on mouseover as so:

.button:hover {
--the stuff--
}
sujeeth_it's Avatar
Junior Member with 23 posts.
 
Join Date: Mar 2006
Experience: Intermediate
21-Apr-2006, 12:16 AM #4
multiple colours to button
Thanks Rockn,

But actually i needed the code which gives multiple colours or like shading effect to form button. The code mentioned will give a single colour and border colour to button.

If anybody know how to give multiple colours to button help me regarding that.

Sujit Joshi
knight_47's Avatar
Senior Member with 1,187 posts.
 
Join Date: Mar 2006
Location: →
Experience: Um... Green?!
21-Apr-2006, 01:06 AM #5
I'm not a pro at this, but why don't you create an image to what you need, and use that? I'm pretty sure you can use the hover attribute with it too.
namenotfound's Avatar
Computer Specs
Distinguished Member with 2,102 posts.
 
Join Date: Apr 2005
Location: New York
Experience: I know what I know, I am
21-Apr-2006, 01:15 AM #6
Yep, that's possible CTI
Just give the button a background-image and if you want a hover effect, just add a different background-image for :hover
sujeeth_it's Avatar
Junior Member with 23 posts.
 
Join Date: Mar 2006
Experience: Intermediate
21-Apr-2006, 08:36 AM #7
Thanks i know i can use image
Thanks,

I know i can use image with shading effect background colour. But i want to use form submit button with shading background colour. Is it possible?

Regards,
Sujit Joshi
namenotfound's Avatar
Computer Specs
Distinguished Member with 2,102 posts.
 
Join Date: Apr 2005
Location: New York
Experience: I know what I know, I am
21-Apr-2006, 10:54 AM #8
No, not with any element.
All the "shading" effects you see, are done with images.

For example:



You can't get that shading effect without using an image.
brendandonhu's Avatar
Distinguished Member with 15,988 posts.
 
Join Date: Jul 2002
Location: Ann Arbor, MI
Experience: Advanced
21-Apr-2006, 11:55 AM #9
You can shade in CSS in some browsers
http://www.webreference.com/programming/css_stylish/
namenotfound's Avatar
Computer Specs
Distinguished Member with 2,102 posts.
 
Join Date: Apr 2005
Location: New York
Experience: I know what I know, I am
21-Apr-2006, 07:07 PM #10
Key word some.

Personality, I never use code that only works in some browser and not others. Plus the fact that Microsoft filters isn't a w3c recommendation, so you'll get erros when validating the CSS.
brendandonhu's Avatar
Distinguished Member with 15,988 posts.
 
Join Date: Jul 2002
Location: Ann Arbor, MI
Experience: Advanced
21-Apr-2006, 07:18 PM #11
As long as it follows graceful degradation I don't see what the problem is. Its better to have your shading effect in some browsers than none it all, and its not like the IE-only code is going to stop it from working in other browsers. You could even use the filter in browsers that support it and load the image in browsers that don't support it.
__________________
-Brendan
TechGuy's Avatar
Computer Specs
Administrator with 8,423 posts.
 
Join Date: Feb 1999
Location: Chambersburg, PA
Experience: Advanced
23-Apr-2006, 08:24 PM #12
This thread has obviously outlived its usefulness, and I somehow doubt that the last page or two offers any help whatsoever to the original poster. I'm going to close it before it grows into any more of a flamewar.
JohnWill's Avatar
Computer Specs
Moderator with 77,290 posts.
 
Join Date: Oct 2002
Location: South Eastern PA, USA
Experience: Advanced age & experience
23-Apr-2006, 08:30 PM #13
I've removed most of the arument, both of you guys should take this "discussion" to your own thread if needed.
AcaCandy's Avatar
Computer Specs
Administrator with 98,726 posts.
 
Join Date: Jan 2001
Location: Las Vegas, NV & Acapulco, Mexico
Experience: Advanced
23-Apr-2006, 08:36 PM #14
What a mess
Closed Thread


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

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

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 12:08 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.