css button with arrow... how to move arrow - css

Question

I am trying to make a basic button box with an arrow at the top of it...
http://jsfiddle.net/8K4qB/ --this is what it comes out to.. i can't make it align at the top in the middle of the bottom.
HTML Code
Read More
CSS Code
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
I'd like it to look like the pic

Answer 1

In order to achieve the specific behaviour you're after you need to change your HTML as well as your CSS- otherwise centrally justifying a pseudo element correctly will elude you.. Change the elements in the example as required (e.g. the top level div can be changed to a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>
CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}

Answer 2

Try this ,display:block so that your arrow still in the middle: DEMO
CSS:
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}
HTML:
<span class="middle">Read More</span>