CodePen Embed - CSS3 & jQuery Calculator

<!-- for whatever reason, this pen is on the popular page. So I made it a little prettier. Also, it's not working here, but is on my website. https://www.mattboldt.com/demos/calculator/. I think it's javascript's eval() function spazzing out -->

<div class="wrap">
  <div class="cal-bg">
<div class="cal">
  <ul class="ctrls">
    <li class="close"><a href="#"></a></li>
    <li class="min"><a href="#"></a></li>
    <li class="max"><a href="#"></a></li>
  </ul>
  <span class="title">Calculator</span>
  <div class="screen">2+2</div>
  <input type="hidden" class="outcome" value="2+2" />
  <ul class="buttons">
    <li><a class="clear">C</a></li>
    <li><a class="val" href="-">&plusmn;</a></li>
    <li><a class="val" href="/">&divide;</a></li>
    <li><a class="val" href="*">&times;</a></li>
    <li><a class="val" href="7">7</a></li>
    <li><a class="val" href="8">8</a></li>
    <li><a class="val" href="9">9</a></li>
    <li><a class="val" href="-">-</a></li>
    <li><a class="val" href="4">4</a></li>
    <li><a class="val" href="5">5</a></li>
    <li><a class="val" href="6">6</a></li>
    <li><a class="val" href="+">+</a></li>
    <li><a class="val" href="1">1</a></li>
    <li><a class="val" href="2">2</a></li>
    <li><a class="val" href="3">3</a></li>
    <li><a class="equal tall">=</a></li>
    <li><a class="val wide shift" href="0">0</a></li>
    <li><a class="val shift" href=".">.</a></li>
  </ul>
</div>
    </div>



<p>I saw <a href="http://forrst.com/posts/Dark_Calculator_Mac_App-aff">this post</a> on <a href="http://forrst.com">Forrst</a> and figured I would give it a go!</a> 
  Follow me on <a href="https://www.twitter.com/atmattb">Twitter</a>, and let me know what you think. <a href="https://mattboldt.com/demos/calculator/">Original Source</a></p>

</div>

@import "compass/css3";

body{
  background-image: -moz-linear-gradient(top, #137cbc 0%, #30a3d3 25%, #4ba4be 35%, #4094a1 40%, #c2c7aa 50%, #beaa79 100%);
    background-image: -webkit-linear-gradient(top, #137cbc 0%, #30a3d3 25%, #4ba4be 35%, #4094a1 40%, #c2c7aa 50%, #beaa79 100%);
      background-image: linear-gradient(top, #137cbc 0%, #30a3d3 25%, #4ba4be 35%, #4094a1 40%, #c2c7aa 50%, #beaa79 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color:#c0c0c0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size:100%;
  letter-spacing: 1.2px;
}
.wrap{
  width:480px;
  margin:50px auto 0;
}
.cal{
  position:relative;
  width:480px;
  height:auto;
  padding:10px 0;
  margin: auto;
  background:#232323;
  border:#000 1px solid;
  border-radius:7px;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  box-shadow:rgba(0,0,0,0.8) 0px 5px 40px, inset rgba(255,255,255,0.9) 0px 1px 1px -1px;
    background-image: -webkit-linear-gradient( top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%), -webkit-radial-gradient(center 150px, circle, #444, #111);
      background-image:radial-gradient(center 150px, circle, #444, #111);
  background-image: -moz-linear-gradient( top, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 100%), -moz-radial-gradient(center 150px, circle, #444, #000);
  overflow: hidden;
  text-align: center;
  z-index:0;
}
  .cal-bg{
    display:block;
  position:relative;
  padding:0 0 2px 0;
  width:482px;
    top:0;
    left:0;
  background-color:#333;
    background-image:-webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 2%);
    border-radius:5px;
  &:before{
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:0;
    width:100%;
    height:3px;
    background-image:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 40%,rgba(255,255,255,0.15) 70%, rgba(255,255,255,0) 100%);
    background-image:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 40%,rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%);
    z-index:9999;
  }
  &:after{
    content:"";
    display:block;
    position:absolute;
    right:0;
    bottom:3px;
    width:100%;
    height:5px;
    background-image:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 30%,rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%);
    background-image:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 30%,rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
    box-shadow:rgba(255,255,255,0.6) 0px 5px 50px 0;
    z-index:9999;
  }
    
  }

.screen{
  width:424px;
  height:93px;
  margin: 12px auto 30px;
  padding:15px 20px;
  color:#c0c0c0;
  text-align: right;
  font-size: 3em;
  letter-spacing: 3px;
  overflow:hidden;
  border:#000 1px solid;
  border-radius:7px;
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
  -webkit-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
  -moz-box-shadow:inset rgba(0,0,0,1) 0px 1px 4px, inset rgba(225,225,225,0.3) 0px -2px 4px -2px;
  background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%), -moz-linear-gradient(top, #3e3e3e 0%, #303030 100%);
    background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%), -webkit-linear-gradient(top, #3e3e3e 0%, #303030 100%);
      background-image: linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%), linear-gradient(top, #3e3e3e 0%, #303030 100%);
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
.title{
  font-size: 1.2em;
}
.buttons{
  padding:0;
  width:423px;
  margin:auto;
  overflow: hidden;
  list-style: none;
}
.buttons li{
  display:inline;
  float:left;
  padding:0px;
  margin-right:13px;
  margin-bottom:10px;
}
/* remove margin-right on every fourth button */
.buttons li:nth-child(4n){
  margin-right:0;
}
.buttons a{
  display:block;
  position:relative;
  width:95px;
  height:68px;
  padding:18px 0 12px;
  color:#c0c0c0;
  font-family: "Myriad Pro", Arial, sans-serif;
  font-size:1.6em;
  font-weight: 500;
  letter-spacing: -2px;
  background-color:#2f2f2f;
  border: #000 1px solid;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  text-align: center;
  text-decoration: none;
  text-shadow:#000 0px -1px 0px;
  box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
  -webkit-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
  -moz-box-shadow: inset rgba(255,255,255,0.1) 0px 1px 0px, inset rgba(0,0,0,0.2) 0px -2px 2px;
  background-image:-moz-radial-gradient(top center, circle, #363636 0%, #313234 40%, #2f2f2f 100%);
    background-image:-webkit-radial-gradient(top center, circle, #363636 0%, #313234 40%, #2f2f2f 100%);
      background-image:radial-gradient(top center, circle, #363636 0%, #313234 40%, #2f2f2f 100%);
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  cursor: pointer;
  overflow:visible;
  &:before{
    content:"";
    display:block;
    position:absolute;
    right:0;
    bottom:0;
    width:100%;
    height:2px;
    background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
    background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
    z-index:9999;
  }
  &:after{
    content:"";
    display:block;
    position:absolute;
    right:0;
    top:0;
    width:100%;
    height:2px;
    background-image:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 30%,rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%);
    background-image:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 30%,rgba(255,255,255,0.1) 80%, rgba(255,255,255,0) 100%);
    box-shadow:rgba(255,255,255,1) 0px 5px 50px 0;
  }
}
.buttons a:active{
  box-shadow: inset rgba(0,0,0,0.5) 0px 2px 8px;
  background-image:-moz-linear-gradient(top, #2f2f2f 0%, #363636 100%);
    background-image:-webkit-linear-gradient(top, #2f2f2f 0%, #363636 100%);
      background-image:linear-gradient(top, #2f2f2f 0%, #363636 100%);
}
/* tall = button */
.tall{height:151px !important;}
/* Wide 0 */
.wide{width:205px !important;}
/* shift last row up, because the tall button pushes it down */
.shift{margin-top:-78px;}


/* close, min, max buttons */
.ctrls{
  list-style: none;
  margin:5px 0 0 20px;
  padding:0;
  position: absolute;
}
.ctrls li{
  float:left;
  display:inline;
}
.ctrls li a{
  display: block;
  width:18px;
  height:18px;
  margin-right:10px;
  border-radius:100%;
  box-shadow:rgba(255,255,255,0.3) 0px 0px 1px, inset rgba(0,0,0,1) 0px 1px 2px 1px;
  background-image: -moz-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -moz-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), -webkit-linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  background-image: radial-gradient( 9px -4px, #FFF 0px, #fff 2px, rgba(255,255,255,0) 4px), linear-gradient(bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
}
.close a{
  background-color:#f32c31;
  
}
.min a{background-color:#f7bf67;}
.max a{background-color:#89cb5a;}
.h1{
  text-align: center;
  color:#fff;
  font-weight: 400;
  font-size: 4em;
  line-height: 0;
  margin-top:80px;
  margin-bottom:-60px;
  text-shadow:#000 0px -1px 0px;
}
p{
  color:#fff;
  text-shadow: #999 0px -1px 0px;
  font-size:1.2em;
  line-height: 2em;
}
a{
  color:#953b3b;
}

View Compiled





  $(".val").click(function(e){
    e.preventDefault();
    var a = $(this).attr("href");
    $(".screen").append(a);
    $(".outcome").val($(".outcome").val() + a);
    
  });
  $(".equal").click(function(){
    $(".outcome").val(eval($(".outcome").val()));
    $(".screen").html(eval($(".outcome").val()));
  });
  $(".clear").click(function(){
    $(".outcome").val("");
    $(".screen").html("");
  });
  $(".min").click(function(){
    $(".cal").stop().animate({
      width: "0px", height: "0px", marginLeft: "700px", marginTop: "1000px"
    }, 500);
    setTimeout(function(){$(".cal").css("display", "none")}, 600);
  });
  $(".close").click(function(){
    $(".cal").css("display", "none");
  })

This Pen is owned by Matt Boldt on CodePen.

See more by @mattboldt on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://www.mattboldt.com/demos/calculator/jquery-1.8.2.min.js