16
2018
05

【教程】css版按钮

先上图片

image.png

html代码

<a href="#" class="btn_grey">马上许愿</a>
<a href="#" class="btn_yellow">领取生日蛋糕</a>

css代码

a{ text-decoration:none;}
.btn_grey{box-shadow:0 1px 1px #a5a5a5 inset,0 1px 1px #fff;height:28px;border-radius:3px; text-align:center; line-height:28px;background:-webkit-gradient(linear,0 0,0 100%,from(#f1f1f1),to(#d7d7d7));
display:inline-block; font-size:13px; text-shadow:1px 1px rgba(255,255,255,.3); width:120px; color:#000;}
.btn_yellow{box-shadow:0 1px 1px #985726 inset,0 1px 1px #fff;height:28px;border-radius:3px; text-align:center; line-height:28px;background:-webkit-gradient(linear,0 0,0 100%,from(#ff8f3e),to(#fe6614));
display:inline-block;font-size:13px;text-shadow:1px 1px rgba(000,000,000,.3);width:120px;color:#fff;}


打赏
« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。