Hey! That worked, almost like I wanted xD
Current codes are
index.html
HTML Code:
<div class="myButton">
<span class="start">
<img src="left.png" />
</span>
<span class="stop">
<img src="right.png" />
</span>
<span class="content">
My Button Text Here!!
</span>
</div>
style.css
Code:
.myButton {
background: url('gradient.png') repeat-x;
height: 28px;
width: 200px;
text-align: center;
}
.myButton .start {
width: 2px;
float: left;
}
.myButton .stop {
width: 2px;
float: right;
}
However!
First, I can't get the text where I want. Right now the text is too far up.
I know it can be solved with padding, but WHERE would I put that?
I tried to put it in the content span.. but it doesn't work.
I tried to put it in the button class css, but that makes the images (the ends) to get padding too, which I don't want.
So that's 1 issue.
The 2nd issue, is that the box isn't expanding. If I don't set any fixed width, the button gets over the whole screen. If I set a width, it's that width all the time.. so how would I make it expanding depending on how much content inside?
Thanks for your help so far!
