HTML
CSS
JS
Run
<div id="box"> <div class="btn-material"> <p class="btn-text">HOVER ME</p> <div class="btn-hover"> <p class="btn-hover-text">GO!</p> </div> </div> <div class="btn-material"> <p class="btn-text">CANCEL</p> <div class="btn-hover"> <p class="btn-hover-text">X</p> </div> </div> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body{ text-align: center; min-height: 270px; display: flex; align-items: center; justify-content: center; font-family: "Open Sans"; border: 1px solid #efefef; } #box{ user-select: none; } .btn-material { background: #fff; border: 1px solid #970374; margin : 25px auto; width : 200px; height : 50px; overflow: hidden; text-align : center; transition : .2s; cursor : pointer; border-radius: 5px; } .btn-hover { position : relative; width : 200px; height : 100px; margin-top: -100px; padding-top: 2px; background : #970374; left : -250px; transition : .3s; } .btn-text { color : #000; transition : .3s; } .btn-hover-text { margin-top : 60px; margin-right : -140px; color : #FFF; } .btn-material:hover .btn-hover{ left: -140px; } .btn-material:hover .btn-text{ margin-left : 45px; color: #970374; }
<script>N/A</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
