Horizontally stretched button - html

Question

I've task to create button with rounded corners that will stretch horizontally to container (now containers is only div's).
It should work in IE8 and higher.
Can you please advise is appropriate solution that I provide or there is better exist?
My solution:
.button-streched {
cursor: pointer;
width: 100%;
clear: both;
background-position: 0px 0px;
}
div.button-show-more div{
background-repeat: no-repeat;
height: 34px;
padding: 0;
}
.button-streched .left {
float: left;
background-image: url(/Images/buttton-left.png);
width: 6px;
height: 34px;
}
.button-streched .right {
float: right;
background-image: url(/Images/buttton-right.png);
width: 6px;
height: 34px;
}
.button-streched .middle {
background-image: url(/Images/buttton-middle.png);
background-repeat: repeat-x;
background-color: lightgreen;
margin: 0px 6px;
text-align: center;
}
.button-streched span{
vertical-align: middle;
line-height: 34px;
}
div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
background-position: 0 100%;
cursor: pointer;
}
and HTML:
<div id="btnButton1" class="button-streched" style="">
<div class="left"></div>
<div style="width: 100%;">
<div class="right"></div>
<div class="middle">
<span>Do Some Action</span>
</div>
</div>
</div>
Shorten version, just to demonstrate that it works:
http://jsfiddle.net/xMKhZ/

Answer 1

You can make use of CSS3 PIE for rendering several of the most useful CSS3 decoration features.

Answer 2

Replace your CSS with this one.
.button-streched {
cursor: pointer;
width: 100%;
clear: both;
background-position: 0px 0px;
}
div.button-show-more div{
background-repeat: no-repeat;
height: 34px;
padding: 0;
}
.button-streched .left {
float: left;
background-image: url(/Images/buttton-left.png);
width: 6px;
height: 34px;
}
.button-streched .right {
float: right;
background-image: url(/Images/buttton-right.png);
width: 6px;
height: 34px;
}
.button-streched .middle {
background-image: url(/Images/buttton-middle.png);
background-repeat: repeat-x;
background-color: lightgreen;
margin: 0px 6px;
text-align: center;
border-radius:10px;
}
.button-streched span{
vertical-align: middle;
line-height: 34px;
}
div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
background-position: 0 100%;
cursor: pointer;
}