Answers
最好不要使用图片，这种按钮通过css3可以实现。移动端的话可以放心使用。
采用伪元素不方便控制变化的宽度，所以采取外层元素相对定位，内存元素绝对定位的方式来处理。
样式(没有处理阴影之类的):
<style type="text/css">
.download{border:2px solid #D73E3E;background:#8F2D2E;padding:10px 40px;text-align:center;color:#FFF;position:relative;border-radius:20px;overflow: hidden;}
.download em{position:relative;z-index:1;}
.download i{height:100%;display:inline-block;position:absolute;top:0;left:0;background:#FA8F53;}
</style>
html片段：
<a class="btn download"><em>loading</em><i style="width:30%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:50%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:80%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:100%;"></i></a>
eonshow
answered 9 years, 10 months ago
大致Codepen里面模拟了一个，颜色参数可能不太对，左上角的高亮可以用图片替代。
http://codepen.io/cheerxl/pen/mePxPG
秋人Akito
answered 9 years, 10 months ago