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; }