「gbtags编程挑战」：设计酷炫翻转按钮，极客大神何在

2015-05-26 本文已影响78人 hiStarter

编程挑战

代码挑战要求

给定如下HTML

按钮点击加载设计效果

更多信息

及其相关基础CSS

/*CSS源代码*/

html,body{

padding:0;

margin:0;

background:#fafafa;

text-align:center;

font-family:'microsoft yahei',Arial,sans-serif;

}

body{

padding-top:5em;

}

h1{

margin-bottom:3rem;

color:#666;

font-size:1.5rem;

font-weight:normal;

}

button{

position:relative;

border:0;

margin:0;

padding:0;

cursor:pointer;

font-family:'microsoft yahei',Arial,sans-serif;

font-size:1.2rem;

color:rgba(0,0,0,0);

background:transparent;

border-radius:.25rem;

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-touch-callout:none;

}

button,

button:after,

button:before{

padding:.6875rem4rem;

-webkit-transition:-webkit-transform0.75s,background-color.125s;

-moz-transition:-moz-transform0.75s,background-color.125s;

-ms-transition:-ms-transform0.75s,background-color.125s;

transition:transform0.75s,background-color.125s;

}

button:after,

button:before{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

border-radius:.25rem;

}

button:before{

z-index:2;

color:#fff;

background-color:#aa0000;

content:attr(data-label);

}

button:after{

z-index:1;

background-color:#999;

background-repeat:no-repeat;

background-position:center center;

background-image:url(data:image/gif;base64,R0lGODlhEAAQAPIAAJmZmf///7CwsOPj4////9fX18rKysPDwyH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==);

content:'';

}

button:active:before{

background-color:#800000;

}