Cool webpage navigation

<!DOCTYPE html>
<html>
<head>
<style>
#main
{
position:absolute;
border:1px solid;
left:100px;
top:100px;
right:100px;
bottom:100px;
overflow:hidden;
}
.current
{
 position:absolute;
 left:0px;
 width:100%;
 background-color:hsl(0,0%,90%);
 height:100%;
 -ms-transition:2s all;
}
iframe
{
 width:100%;
 height:100%;
 border:0px solid;
}
button
{
 cursor:pointer;
}
</style>
<script>
function DeleteTop(arr)
{
 arr[arr.length-2].style.left =  -main.clientWidth+"px";
  arr[arr.length-1].style.left = "0px";

 setTimeout(function(){
  main.removeChild(main.children[0]);
  if(main.children.length==1)
 document.documentElement.style.cursor = "";
 },2000);

}
function load(btn)
{
 var currents = main.getElementsByClassName("current");
 var div = document.createElement("div");
 var iframe = document.createElement("iframe");
 div.appendChild(iframe);
 div.className = "current";
 iframe.src = btn.innerText;
 iframe.style.frameBorder = "0";
 div.style.left = main.clientWidth+"px";
 main.appendChild(div);
 iframe.onload = function(){DeleteTop(currents);};
 document.documentElement.style.cursor = "wait";
}
</script>
</head>
<body>
<button onclick="load(this)">http://www.google.com</button>
<button onclick="load(this)">http://www.youtube.com</button>
<div id="main">
<div class="current" style="top:0px;">
Home
</div>
</div>
</body>
</html>