Olá Diego,
no html não há nada que saber, onde houver uma "class" ou um "id" ou mesmo um <h1>, <h2>, <p>, <a>, etc... podes estilizar o elemento. Não precisas fazer mais nada no html a não ser que queiras adicionar class's novas (é simples, google por "adicionar class css").
No css usas a propriedade background-position para posicionar a imagem de fundo:
http://www.w3schools.com/css/pr_background-position.asphttp://www.w3schools.com/css/css_background.aspOu seja, vou tentar resumir, se quiseres usar uma imagem atrás do botão "ler mais" fazes o seguinte no css (assumimos que a class do link é .read-more):
**************************
.read-more:link, .read-more:visited {
background-image: url(images/imagem_de_sprites.png); /* Chamas a imagem com os sprites*/
background-repeat: no-repeat; /* Indicas que a imagem não deve repetir */
background-position: 40px 0px; /* Aqui basicamente estás a escolher o sprite que queres, neste caso fomos para uma imagem posicionada a partir do pixel 40 vertical e do 0 horizontal da imagem_de_sprites.png */
}
.read-more:hover {
background-position: 80px 0px; /* Agora, quando o rato passa por cima do link, vai mostrar o sprite da posição 80px 0px da mesma imagem */
}
**************************
Se reparares o link normal (:link e :visited) está com a sprite posicionada a 40px 0px, no link :hover (quando o rato fica em cima) chamamos a sprite posicionada em 80px 0px.
Está um pouco confuso, sem um exemplo fica mais complicado de explicar. Tentei deixar o essencial apenas. Deu para entender?