移动端web如何实现这样的按钮加载效果？
因为是移动端所以图片是用img元素，并且宽度不能写死是百分比，这样的话如果用两个divabsolute或者伪元素就会造成另一个div错位，有什么好方法可以实现吗？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
因为是移动端所以图片是用img元素，并且宽度不能写死是百分比，这样的话如果用两个divabsolute或者伪元素就会造成另一个div错位，有什么好方法可以实现吗？
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
发布评论
评论（3）
大致Codepen里面模拟了一个，颜色参数可能不太对，左上角的高亮可以用图片替代。
http://codepen.io/cheerxl/pen/mePxPG
最好不要使用图片，这种按钮通过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>
放到背景去就好了。