Border Hover Effect

HTML
<div class="canvas"> <div class="box box--outer"> <div class="box box--inner">hover</div> <div class="box-rotate"> <div class="quart quart--red"></div> <div class="quart quart--green"></div> <div class="quart quart--blue"></div> <div class="quart quart--yellow"></div> </div> </div> </div>
SCSS
html, body { background-color: #212121; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; * {box-sizing: border-box;} } .canvas { position: relative; background: #212121; width: 300px; height: 300px; margin: 100px; padding: 50px 0; } .box { overflow: hidden; } .box--outer { padding: 5px; position: relative; width: 200px; height: 200px; margin:0 auto; } .box--inner { width: 195px; height: 195px; background: #212121; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(0.95); position: absolute; z-index: 1; text-align: center; line-height: 195px; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); color: #25C1BB; text-transform: uppercase; letter-spacing: 8px; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .box-rotate { position: absolute; width: 400px; height: 400px; top: -100px; left: -100px; transition: all .8s cubic-bezier(0.190, 1.000, 0.220, 1.000); .quart { width: 200px; height: 200px; position: absolute; } .quart--red { top: 0; left: 0; background: #e74c3c; } .quart--green { top: 0; left: 200px; background: #2ecc71; } .quart--blue { top: 200px; left: 200px; background: #3498db; } .quart--yellow { top: 200px; left: 0; background: #f1c40f; } } .box--outer:hover { cursor: pointer; .box--inner { width: 195px; height: 195px; transform: translateX(-50%) translateY(-50%) scale(1); background: #313131; } .box-rotate { transform: rotate(180deg); } }
JAVASCRIPT
Expand for more options Login