h1 {color: #e5197f;}

li{display: inline-block;
   width: 250px;
   height: 50px;
   text-align: center;
   background-color: #87ceeb
   font-size: 16px;
   line-height: 52px;
   color: #e0ffff;
   text-decoration: none;
   font-weight: bold;
   border: 2px dashed #87ceeb;
   position: relative;
   overflow: hidden;
   z-index: 1;
   }

li:after{width: 100%;
         height: 0%;
	 content: "";
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 background: #e0ffff;
	 opacity: 0;
	 transform: translateX(-50%) translateY(-50%) rotate(45deg);
	 transition: .2s;
	 z-index: -1;
	 }

li:hover{color: #87ceeb;}

li:hover:after{height: 240%;
               opacity: 1;
	       }

li:active:after{height: 340%;
                opacity: 1;
		}