CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS with buttons

Discuss CSS with buttons in the CSS Help forum on Dev Shed.
CSS with buttons Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 13th, 2001, 06:41 AM
charkus charkus is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: Bath, England
Posts: 312 charkus User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 28 m 14 sec
Reputation Power: 7
CSS with buttons
Hi,

I've been playing about with using CSS with form buttons. The problem I've got it that I want to be able to create a sort of image swap effect but can't figure out how.

The code I've got so far is:

<html>
<head>
<style type=text/css>
.button { border : 1px solid #000000; font-family : Verdana; font-size : 12pt; color : #CC0000; background-color : #DBDCD0; cursor: hand }
</style>

</head>

<body>
<form>
<input type=submit name=submit_button class=button value=Button>
</form>

</body>
</html>

I've tried creating another class with the different colours I want when the cursor is over the button, but I can't work out how to implement this.

Anyone got any ideas?
__________________
Charkus
Reply With Quote
  #2  
Old September 13th, 2001, 11:25 AM
ishnid's Avatar
ishnid ishnid is offline
kill 9, $$;
Dev Shed God 1st Plane (5500 - 5999 posts)
  
Join Date: Sep 2001
Location: Dublin, Eire
Posts: 5,509 ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level)ishnid User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 1 Week 2 Days 17 h 57 m 58 sec
Reputation Power: 1322
Put this in the <input> tag:

onMouseOver=javascript:this.style.color="#001122"

It'll work in IE - not sure how to do it in NS

~ishnid
Reply With Quote
  #3  
Old September 13th, 2001, 06:20 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Code:

<html>
<head>
<title>untitled</title>
<style type="text/css">

.buttonOut  {
             font:bold 10pt Verdana,sans-serif;
             color:#cc0000;
             border:3px #666666 ridge;
             background:#d8af79;
             cursor:hand;
            } 
.buttonOver {
             font:bold 10pt Verdana,sans-serif;
             color:#ef0000;
             border:3px #888888 groove;
             background:#d0a770;
             cursor:hand;
            } 
.buttonDown {
             font:bold 10pt Verdana,sans-serif;
             color:#ffff00;
             border:3px #c0c0c0 outset;
             background:#000000;
             cursor:hand;
            } 

</style>
<script language="JavaScript" type="text/javascript">

function showCSS(c,n) {
var css = document.styleSheets[0].rules.item(c).style;
disp.innerHTML = 
'<b>CLASS</b> : ' + n + '<br><br>' +
'FONT : ' + css.font + '<br>' +
'COLOR : ' + css.color + '<br>' +
'BORDER : ' + css.border + '<br>' +
'BACKGROUND : ' + css.background + '<br>' +
'CURSOR : ' + css.cursor;
}

</script>
</head>
<body text="#cbfcc9" bgcolor="#000000" onload="showCSS(0,'buttonOut')">
<div align="center"><br>
<form style="width:300px;padding:8px;border:4px brown double;background-color:#c36241;"> 
<input type="submit" class="buttonOut" name="submit_button" value="Button" 
onmouseover="this.className='buttonOver';showCSS(1,this.className)" 
onmouseout="this.className='buttonOut';this.blur();showCSS(0,this.className)"
onmousedown="this.className='buttonDown';showCSS(2,this.className)"
onmouseup="this.className='buttonOver';showCSS(1,this.className)" 
onclick="return false">
<strong>&nbsp;Click me!</strong>
</form>
<div id="disp" 
style="width:300px;padding:8px;border:4px brown double;
background-color:#c36241;text-align:left;">
</div>
</div> 
</body>
</html>


Forget CSS support for this in Netscape 4; you'll need to use actual image swaps to reproduce the effect...
Last edited by adios : September 13th, 2001 at 11:26 PM.
Reply With Quote
  #4  
Old September 14th, 2001, 03:42 AM
charkus charkus is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: Bath, England
Posts: 312 charkus User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 28 m 14 sec
Reputation Power: 7
Thanks!

I'm not bothered about Netscape anyway. If they can't be bothered to get CSS working properly by now, they shouldn't be suprised no-one will use their software.

Thanks again!
Reply With Quote
  #5  
Old August 10th, 2003, 04:23 PM
markmouse markmouse is offline
Junior Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Apr 2002
Location: Greece
Posts: 7 markmouse User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
how to prevent the space on the sides of the buttons
Hi,

The example above is great! I just wonder how I can prevent the space on the sides of the buttons. The longer the text on the button the more empty space on both sides of the text appears.

Is there a way to get rid of this space?

Thanx!

Mark
Last edited by markmouse : August 10th, 2003 at 04:50 PM.
Reply With Quote
  #6  
Old August 10th, 2003, 06:43 PM
ctstone's Avatar
ctstone ctstone is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2003
Posts: 147 ctstone User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
For what it's worth, here is a version of the above script that works in IE as well as standards compliant browsers. Also, all you should really worry about when writing javascript is "will this script work in the latest versions of IE, Mozilla, and Opera". If you can pull that off, you should be set. FYI: Netscape is no longer supported and has been replaced by the superior Mozilla Browser (currently Mozilla Firebird). Firebird has no problem (that I've ever seen) rendering scripts that conform to DOM1 or DOM2.

Code:
<html>
<head>
	<title>untitled</title>
	<style type="text/css">

	.buttonOut  {
	             font:bold 10pt Verdana,sans-serif;
	             color:#cc0000;
	             border:3px #666666 ridge;
	             background:#d8af79;
	             cursor:hand;
	            }
	.buttonOver {
	             font:bold 10pt Verdana,sans-serif;
	             color:#ef0000;
	             border:3px #888888 groove;
	             background:#d0a770;
	             cursor:hand;
	            }
	.buttonDown {
	             font:bold 10pt Verdana,sans-serif;
	             color:#ffff00;
	             border:3px #c0c0c0 outset;
	             background:#000000;
	             cursor:hand;
	            }

	</style>
	<script language="JavaScript" type="text/javascript">

	function showCSS(c,n) {
		if(!document.all) {
			var css = document.styleSheets[0].cssRules.item(c).style;
		} else {
			var css = document.styleSheets[0].rules.item(c).style;
		}
		document.getElementById('disp').innerHTML =
		'<b>CLASS</b> : ' + n + '<br><br>' +
		'FONT : ' + css.font + '<br>' +
		'COLOR : ' + css.color + '<br>' +
		'BORDER : ' + css.border + '<br>' +
		'BACKGROUND : ' + css.background + '<br>' +
		'CURSOR : ' + css.cursor;
	}

	</script>
</head>
<body text="#cbfcc9" bgcolor="#000000" onload="showCSS(0,'buttonOut')">
	<div align="center">
		<br>
		<form style="width:300px;padding:8px;border:4px brown double;background-color:#c36241;">
		<input type="submit" class="buttonOut" name="submit_button" value="Button"
		onmouseover="this.className='buttonOver';showCSS(1,this.className)"
		onmouseout="this.className='buttonOut';this.blur();showCSS(0,this.className)"
		onmousedown="this.className='buttonDown';showCSS(2,this.className)"
		onmouseup="this.className='buttonOver';showCSS(1,this.className)"
		onclick="return false">
		<strong>&nbsp;Click me!</strong>
		</form>
		<div id="disp" style="width:300px;padding:8px;border:4px brown double; background-color:#c36241;text-align:left;"></div>
	</div>
</body>
</html>
__________________
ctnstone.com
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS with buttons

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.