<section>
  
  <p id="botao">Clique para ver o efeito</p>
  
  <div id="quadrado"></div>
  
</section>
html, body, section{
	height: 100%;
}

#botao{
  widht:100%;
  text-align: center;
  color:#fff;
  font-family: arial;
  text-transform:uppercase;
  background:#76bae1;
  padding: 0.5em 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor:pointer;
}

#botao:hover{
  background:#569bc3;
}

#quadrado{
  display: block;
	width: -webkit-calc(100% - 20px);  /* para Chrome */
	width: -moz-calc(100% - 20px);     /* para Firefox */
	width: calc(100% - 20px);          /* para suporte nativo */
	height: 60%;
  background:#ff0;
  border:10px solid #f28d69;
}
$(document).ready(function(){
	$('#botao').click(function(){ 
	$('#quadrado').fadeToggle('slow');
	});
});
Rerun