Remux of Vasudha Chandak's dribbble "Interface Icons"

Tutorials of (Remux of vasudha chandak's dribbble "interface icons") by Carl calderon

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Remux of Vasudha Chandak's dribbble "Interface Icons"</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  width: 100%;
  height: 100%;
}
body {
  background: rgb(255,255,255);
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 100px rgb(150, 150, 150);
}
section {
  width: 310px;
  position: fixed;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -40px;
}
section button {
  margin: 10px;
  border-radius: 100%;
  width: 80px;
  height: 79px;
  border: none;
  background: rgb(245, 245, 245);
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4), 0px 1px 2px rgba(255,255,255, 1.0);
}
section button:before {
  content: " ";
  display: block;
  width: 65px;
  height: 65px;
  background: rgb(250, 250, 250);
  box-shadow: inset 0px -1px 4px 1px rgba(0,0,0,0.4), inset 0px 2px 15px 3px rgba(255,255,255, 1.0), 2px 2px 1px rgba(0,0,0,0.1);
  position: absolute;
  border-radius: 100%;
  margin-top: -25px;
  margin-left: 1px;
}
section button:after {
  display: block;
  position: absolute;
  color: #5a9bad;
  text-shadow: 0px 1px 0px white;
}
section button:hover:after {
  color: #5cb8d1;
}
section button:active:after {
  color:#5a9bad;
  padding-top: 1px;
}
section button:active:before { 
  background: rgb(248, 248, 248);
  box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.1), inset -2px -2px 15px 3px rgba(255,255,255, 0.8), inset 2px 2px 1px rgba(0,0,0,0.1);
}

/* class specific styling */
section button.smile:after {
  content: "☺";
  font-size: 50px;
  margin-top: -38px;
  margin-left: 8px;
}
section button.peace:after {
  content: "☮";
  font-size: 48px;
  margin-top: -41px;
  margin-left: 16px;
}
section button.star:after {
  content: "☆";
  font-size: 33px;
  margin-top: -30px;
  margin-left: 17px;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <section>
  <button class="smile">Smile</button>
  <button class="peace">Peace</button>
  <button class="star">Star</button>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html {
  width: 100%;
  height: 100%;
}
body {
  background: rgb(255,255,255);
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 100px rgb(150, 150, 150);
}
section {
  width: 310px;
  position: fixed;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -40px;
}
section button {
  margin: 10px;
  border-radius: 100%;
  width: 80px;
  height: 79px;
  border: none;
  background: rgb(245, 245, 245);
  box-shadow: inset 0px 1px 3px rgba(0,0,0,0.4), 0px 1px 2px rgba(255,255,255, 1.0);
}
section button:before {
  content: " ";
  display: block;
  width: 65px;
  height: 65px;
  background: rgb(250, 250, 250);
  box-shadow: inset 0px -1px 4px 1px rgba(0,0,0,0.4), inset 0px 2px 15px 3px rgba(255,255,255, 1.0), 2px 2px 1px rgba(0,0,0,0.1);
  position: absolute;
  border-radius: 100%;
  margin-top: -25px;
  margin-left: 1px;
}
section button:after {
  display: block;
  position: absolute;
  color: #5a9bad;
  text-shadow: 0px 1px 0px white;
}
section button:hover:after {
  color: #5cb8d1;
}
section button:active:after {
  color:#5a9bad;
  padding-top: 1px;
}
section button:active:before { 
  background: rgb(248, 248, 248);
  box-shadow: inset 0px 1px 4px 1px rgba(0,0,0,0.1), inset -2px -2px 15px 3px rgba(255,255,255, 0.8), inset 2px 2px 1px rgba(0,0,0,0.1);
}

/* class specific styling */
section button.smile:after {
  content: "☺";
  font-size: 50px;
  margin-top: -38px;
  margin-left: 8px;
}
section button.peace:after {
  content: "☮";
  font-size: 48px;
  margin-top: -41px;
  margin-left: 16px;
}
section button.star:after {
  content: "☆";
  font-size: 33px;
  margin-top: -30px;
  margin-left: 17px;
}
/* Downloaded from https://www.codeseek.co/ */
(function() {


}).call(this);

This awesome code ( Remux of Vasudha Chandak's dribbble "Interface Icons" ) is write by Carl Calderon, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Carl Calderon