<h1 class="h1">block animation</h1> <div class="wrap"> <div class="inner" id="js-query-action"> <section class="section"> <a class="block" href=""><span>HOVER</span></a> </section> </div> </div> <link href="https://fonts.googleapis.com/css?family=Dancing+Script:400,700" rel="stylesheet">
body { width: 100%; min-height: 100vh; background-image: linear-gradient(60deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 1.2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .wrap { display: flex; justify-content: center; align-items: center; } .inner { padding-right: 1em; padding-left: 1em; min-width: 300px; } .section { max-width: 480px; padding: 1em; border: 6px double currentColor; } .block { display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; width: 300px; height: 300px; font-size: 32px; background-color: rgba(white, .35); transition: .4s .25s ease-out; // &::after, &::before { content: ""; position: absolute; z-index: 2; top: 100%; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; } // &::after { background: #00889b; transition: all 0.25s 0.25s ease-in; } // &::before { z-index: 3; background: #ccaa77; transition: all 0.25s ease-in; } // > span { position: relative; z-index: 4; } // &:hover { text-decoration: none; color: white; letter-spacing: .1em; font-size: 25vw; // &::after { top: 0; transition: all 0.25s ease-out; } // &::before { top: 0; transition: all 0.25s 0.25s ease-out; } } }