I have two download links as follows:

1. <a class="artbutton" href="http://10.0.0.201/wp/wp-content/uploads/2014/01/2014.01-ADC-CV.pdf"><span>CV</span></a>
 and, 2. <a class="artbutton" href="http://10.0.0.201/wp/wp-content/uploads/2014/01/2011-Business-Profile-.pdf"><span>Company Profile</span></a> in PDF form.

I'm expecting to get '1.' followed by the two buttons seperated by 'and, 2.' and followed by 'in PDF form'.

What I'm actually getting is the two buttons together follwed by '1. and, 2. in PDF form'.

Hope that makes sense.

What I want is <text> button <more text> button <ending text>.

What I'm getting is button button <text> <more text> <ending text>.

My CSS is as follows:

.artbutton {
  background-image: url("images/Buttonr.png");
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: top right;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  float: left;
  padding-right: 8px;
  padding-top: 2px;
  padding-bottom: 12px;
  margin-right: 20px;
}
.artbutton span{
  background-image: url("images/Buttonl.png");
  background-repeat: no-repeat;
  padding: 4px 0 16px 8px;
}

With the code sample you provided, it seems to me that the text would be placed on top of the buttons. i copied and pasted your code and just used a random image as a button. seems to work for me.

Do you have a link so I can see the site online?

or do you have the html? if there is too much code, you can put this on jsfiddle as well so we can see it online.

Thanks.

No, it's not online yet.

I'll put it up in the next day or two.