Shared Ideas

CSS Button Element Makeover

Inspired by Kevin Hale's article, we've designed a button that features a tiled background image.
We also made use of two span elements in order to give the 1px rounded corners effect.

Here's the background image: button background

 .sizeone{
  width:100px;
  }
  
  button{
  float:left;
  display:block;
  margin-top: 1px;
  margin-right: 1px;
  margin-bottom: 0px;
  margin-left: 0px;
  overflow:visible;
  cursor:pointer;
  padding:0px;
  position:relative;
  border:none;
  color:#395264;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  background:transparent;
  }
  
  span.wrap{
  display:block;
  position:relative;
  border-width:1px 0;
  border-color:#668CA8;
  border-style:solid;
  color:#395264;
  text-decoration:none;
  margin:4px 1px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:15px;
  letter-spacing:1px;
  background-image: url(images/button_background.jpg);
  background-repeat: repeat-x;
  background-position: left center;
  }
  
  span.wrap span{
  display:block;
  position:relative;
  margin:0 -1px;
  border-width:0 1px;
  border-color:#668CA8;
  border-style:solid;
  padding:5px 10px;
  }