#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    Bath, England
    Posts
    312
    Rep Power
    14

    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
  2. #2
  3. kill 9, $$;
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2001
    Location
    Shanghai, An tSín
    Posts
    6,897
    Rep Power
    3886
    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
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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>&amp;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.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    Bath, England
    Posts
    312
    Rep Power
    14
    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!
    Charkus
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Greece
    Posts
    7
    Rep 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.
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    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>

IMN logo majestic logo threadwatch logo seochat tools logo