Buttons

Discussion in 'Web Design and Development' started by Cabbit, Mar 8, 2008.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    hey all i have buttons on my webpage and i want to style them but so far i can only replace the button with a still image is there no way to do it with css or at least a simple rollover.
     
  2. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
  3. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #3
    I know your done but I'm just curious, did you do it with a:hover ?
     
  4. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #4
    the css
    HTML:
    .button_submit {
    	width:80px;
    	height:20px;
    	background-image:url(images/buttons/btn_up.png);
      	background-repeat:no-repeat;
    	border: 0px solid;
    	font-size: 9pt;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    .button_submit_hover {
    	width:80px;
    	height:20px;
    	background-image:url(images/buttons/btn_down.png);
      	background-repeat:no-repeat;
    	border: 0px solid;
    	color: #ffffff;
    	font-size: 9pt;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    in the form
    HTML:
    <input type="submit" style="cursor: pointer" class="button_submit" onmouseover="this.className='button_submit_hover'" onmouseout="this.className='button_submit'" alt="login"/>
    
    Some interesting points is that you must tell it
     
  5. Cabbit thread starter macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #5
    the css
    HTML:
    .button_submit {
    	width:80px;
    	height:20px;
    	background-image:url(images/buttons/btn_up.png);
      	background-repeat:no-repeat;
    	border: 0px solid;
    	font-size: 9pt;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    .button_submit_hover {
    	width:80px;
    	height:20px;
    	background-image:url(images/buttons/btn_down.png);
      	background-repeat:no-repeat;
    	border: 0px solid;
    	color: #ffffff;
    	font-size: 9pt;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    Interesting bit about the css, you must have the border set to 0px solid or you will end up with a rather ugly believed button. It also doesn't support transparency so you will need a different image button for any areas you have your button and the background is a different colour.


    in the form
    HTML:
    <input type="submit" style="cursor: pointer" class="button_submit" onmouseover="this.className='button_submit_hover'" onmouseout="this.className='button_submit'" alt="login"/>
    
    Some interesting points is that it will take the name of the element just like a normal button, in this case submit and you don't need to do any centering or stuff like that.
     

Share This Page