Share this page 

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">