Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Button</title>
  
  <style>
​
span.button {
  background:url(http://img585.imageshack.us/img585/9379/buttonbg.gif) no-repeat top right; 
  display:inline-block;
      padding-right: 9px; /* sliding doors padding */
      cursor:pointer;
}
​
span.button span
{
  padding:0;
  margin:0;
}
​
span.button input.form_button {
  background:url(http://img585.imageshack.us/img585/9379/buttonbg.gif) no-repeat left top;
  padding-left:8px;
  padding-right:2px;
  text-align:center;
  line-height:26px;
  height:29px;
  margin-left:0px; /* fixes margin issue with safari and chrome. no an issue for ie or ff. */
  display:inline-block;
}
​
input.form_button {
  cursor:pointer;
  font-weight:bold;
  display:inline-block;
  border:0;
  font-size:14px;
  color:#FFFFFF;
     width: auto; /* fixes width issue for ie browsers */
      overflow:visible; /* fixes width issue for ie browsers */
}
​
​
span.button:hover input.form_button {
  background-position:left -39px;
  color:#FFFFFF;
}
​
span.button:active input.form_button {
  background-position:left -78px;
  color:#FFFFFF;
}
​
.button:hover {
  background-position:right -39px;
}
​
.button:hover span {
  background-position:left -39px;
}
​
.button:active {
    background-position:right -78px;
}
​
.button:active span {
    background-position:left -78px;
}
​
input.form_button[type="submit"]::-moz-focus-inner, input.form_button[type="button"]::-moz-focus-inner {   
  border : 0px;
} 
​
input.form_button[type="submit"]:focus, input.form_button[type="button"]:focus{     
  outline : none; 
}
  </style>
</head>
​
<body>
​
<span class="button"><span><input type="submit" class="form_button" value="Testing Button"></span></span>
​
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers