Lm311 Battery Charger Circuit Diagramfor 24v

Graphic Form Button with CSS (valid without Javascript)

In some forms, it is desirable that you can implement Custom graphical buttons, without the code handling - for example with additional JavaScript code - is restricted. It can be created using an additional layer in the HTML code, CSS formatting, and the following two simple button graphics valid buttons, which are adjusted by the length of her nor automatic. The two graphs consist of the actual button without the right degree and a minimum length of 300 pixels and the 2nd Graphics with the button's degree which includes only the right line.

CSS formatting:

 
   div.button { 
    height: 28px; 
    background: url('images/btn_right.gif') right 
                no-repeat; 
    width: auto; 
    float: left; 
    padding: 0 3px 0 0; 
  } 
  
  div.button input.button { 
    height: 28px; 
    width: auto; 
    background: url('images/btn_bg.gif') left center 
                no-repeat; 
    color: #000; 
    font-weight: bold; 
    border: none; 
    overflow: visible; 
    display: inline; 
    margin: 0; 
    padding: 0 10px 0 22px; 
    font-size: 12px; 
    font-weight: bold; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 cursor: pointer;} 
 
 

HTML code:

 \u0026lt;div class="button"> 
 \u0026lt;input type = "button" name = "submit" class = "button" 
 value = "Search" /> 
 \u0026lt;/ div> 
 

The width of the button is automatically adjusted depending on the value input value ("search").