Door-by-RayPS.com.markdown

Door by RayPS.com

A Pen by RayPS on CodePen.

License.

index.html

<div id="window">
  <div id="door">
    <a id="circle" onclick="myFunction()">
      <span></span>
    </a>
  </div>
</div>

script.js

var open = false;
var door = document.getElementById("door");
function myFunction() {
  if (!open){
    door.style.top = "350px";
    open = true
  } else {
    door.style.top = "100px";
    open = false
  }
}

style.css

*{margin:0;padding:0;}
body{background-color: #51A780;}


#window{
  width:400px;
  height:400px;
  background-color: #EEEDEB;
  margin:100px auto;
  overflow: hidden;
  border-radius:10px;
}

#door{
  position: relative;
  top: 100px;
  width:400px;
  height:400px;
  background-color: white;
  transition:all .25s ease-out;
}

#circle{
  display: block;
  cursor: pointer;
  width:80px;
  height: 50px;
  background-color: white;
  position: relative;
  top: -20px;
  margin: 0 auto;
  border-radius:40px/25px;
}

#circle span{
  display: block;
  width:0;
  height: 0;
  border: 10px solid transparent;
  border-top: 10px solid STEELBLUE;
  margin: 0 auto;
  position: relative;
  top: 20px;
}

#circle:hover span{border-top: 10px solid DODGERBLUE;}