【代码】白色方块按钮效果（刷新，返回，我的磨）
2014-11-03 12:26:54 +0800
转自＠笑忘书 刷新
<style> .icon-refresh{ background:url(http://uc.gre/gre/locale/public_resources/images/net_error/android/icon_refresh.png) no-repeat 10px 50%,-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#ececec)); background-size:14px 15px,auto auto; display:inline-block;padding:6px 10px;text-indent:23px;font-size:13px; margin:0 10px; color:#656565;border:1px #cacaca solid;border-radius:3px;text-decoration:none; } .icon-refresh:visited {color:#656564;} </style> <a class="icon-refresh" href="ext:refresh"> 刷新 </a>
•代码演示
刷新
<style> .icon-back{ background:url(http://uc.gre/gre/locale/public_resources/images/net_error/android/icon_back.png) no-repeat 13px 50%,-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#ececec)); background-size:14px 15px,auto auto; display:inline-block;padding:6px 10px;text-indent:23px;font-size:13px; margin:0 10px; color:#656565;border:1px #cacaca solid;border-radius:3px;text-decoration:none;} .icon-back:visited {color:#656564;} </style> <a class="icon-back" href="ext:back"> 返回 </a>
•代码演示
返回
<style> .kele:before{ position: absolute; content: " "; border: transparent 14px solid; border-width: 13px 8px ; border-right-color: #CCC; top: 1px; left: -16px; height: 0; width: 0; } .kele{ position: relative; width: 40px; height: 28px; background: #EEE; border-radius: 5px; margin: 30px; text-align: center; line-height: 28px; color: #999; font-size: 14px; border: 1px solid #CCC; } .kele:after{ position: absolute; content: " "; border: transparent 13px solid; border-width: 12px 8px; border-right-color: #EEE; top: 2px; left: -15px; height: 0; width: 0; } </style> </head> <body> <div class="kele"> <a href='javascript:history.back(-1)'>返回</div> </body> </html>
•代码演示
返回