html { height:100%; background:radial-gradient(circle,#ffffff,#cc6ab0); } * { margin:0; padding:0; font-family:arial; font-size:14px; font-weight:bold; } #calculator { width:325px; height:310px; margin:100px auto; background:linear-gradient(#9dd2ea,#8bceec); box-shadow:0 4px #009de4,0 10px 15px rgba(0,0,0,0.2); border-radius:3px; padding:20px 20px 9px 20px; } .top span { float:left; } .top .screen { width:212px; height:40px; background:rgba(0,0,0,0.2); border-radius:3px; font-size:17px; float:right; box-shadow:0 4px rgba(0,0,0,0.2) inset; padding:0 10px; color:#ffffff; text-align:right; letter-spacing:1px; text-shadow:1px 1px 2px rgba(0,0,0,0.2); line-height:40px; } .top { display:inline-block; } .keys span,.top span { width:66px; height:36px; border-radius:3px; background-color:#ffffff; float:left; margin:0 7px 11px 0; text-align:center; line-height:36px; color:#888; box-shadow:0 4px rgba(0,0,0,0.2); cursor:pointer; transition:all 0.2s ease; position:relative; top:0; } .keys span.operator { background-color:#FFF0F5; } .keys span:hover { background-color:#9c89f6; color:white; box-shadow:0 4px #6b54d3; } .keys span.eval { background-color:#f1ff92; box-shadow:0 4px #9da853; color:#888e5f; } .keys span.eval:hover { background-color:#abb850; box-shadow:0 4px #717a33; color:#ffffff; } .top span.clear { background-color:#ff9fa8; box-shadow:0 4px #ff7c87; color:#ffffff; } .top span.clear:hover { background-color:#f68991; box-shadow:0 4px #d3545d; color:#ffffff; } .keys span:active { box-shadow:0 0 #6b54d3; top:4px; } .top span.clear:active { box-shadow:0 0 #d3545d; top:4px; } .keys span.eval:active { box-shadow:0 0 #717a33; top:4px; } .radix { color:#258481; margin-top:10px; float:left; } .radix input,.radix label { cursor:pointer; }