Customize button look and feelTag(s): HTML/CSS


  • Background color
  • <input type="button" value="hello" size=10 
    style="background-color:rgb(235,207,22)">
    

  • Change color on mouse over
  • <input type="button" value="hello" name="B1"
    onMouseOut=this.style.color="blue"
    onMouseOver=this.style.color="red">
    

  • Flat button
  • <input type="button" value="hello" style="border:1px solid #666666;
    height:17px; width:25pt; font-size:9pt; BACKGROUND-COLOR: #E8E8FF;
    color:#666666">
    

  • borderless button
  • <input type="button" value="hello" style="background-color:
    transparent; border: 0;">
    

  • Change the style on mouse over
  • Hello :

    <style type="text/CSS">
    .style1 { font-size: 12px; background: #CCCCFF; 
              border-width: thin thin thin thin; 
              border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}
    .style2 { font-size: 12px; font-weight: bold; 
              background: #CCFFCC; border-width: thin medium medium thin; 
              border-color: #CCFF99 #999999 #999999 #CCFF99}
    </style>
    <p>Hello :
    <input type="submit" name="Submit" value="world" 
           onmouseover="this.className='style2'"
           onmouseout="this.className='style1'" class="style1"> 
    

    blog comments powered by Disqus