Question

I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can’t visibly notice the difference, but perhaps this is some cross browser hack?

It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.

Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364

.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
    background-color: #A5C416;
    background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #90D900;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
    background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
    background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #90D900;
}

Answer 1

gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.

By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.

It’s just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.