non-sprite-example.css

/* 
  So when dealing with CSS sprites, this is how we would normally
  go about styling the HTML
*/
.custom .button{
    position: absolute;
    width:62px;
    height:62px;
    background: url(ps3-assets/face-buttons.png);
}
.custom .button.pressed{
    background-position-y: -64px;
    margin-top: 5px;
}
.custom .a{
    background-position: 62px 0;
    top: 142px;
    left: 71px;
}
.custom .b{
    background-position: 125px 0;
    top: 71px;
    right: 0px;
}
.custom .x{
    background-position: 0 0;
    top: 71px;
}
.custom .y{
    background-position: -63px 0;
    left: 71px;
}


/* 
  If we don't want to use sprites, we can instead give each 
  button it's own background image, and do away with the background
  positioning.
*/

/*
  This helps set the width and height of each button to a single
  width and height, but you can override these at the individual 
  buttons if you need to
*/
.custom .button{
    position: absolute;
    width:62px;
    height:62px;
}
/* 
  Note that because I was using sprites to handle how a pressed 
  button looks, you could achieve the same effect by applying a
  color inversion filter.

  The margin is only there to gie the button the effect it was
  pressed down.
*/
.custom .button.pressed{
    filter: invert(1);
    margin-top: 5px;
}
/*
  The top and left positoning properties are relative to the 
  location of the abxy element. The abxy element is used as a
  container to hold these buttons, so it contains a height,
  width, and position on the gamepad itself.

  With the top, left, bottom, and right properties, we can then
  further position the button within the container, with these
  numbers being distances relative to the edges of the container.
*/
.custom .a{
    background: url(ps3-assets/image-for-this-button.png);
    top: 142px;
    left: 71px;
}
.custom .b{
    background: url(ps3-assets/image-for-this-button.png);
    top: 71px;
    right: 0px;
}
.custom .x{
    background: url(ps3-assets/image-for-this-button.png);
    top: 71px;
}
.custom .y{
    background: url(ps3-assets/image-for-this-button.png);
    left: 71px;
}