/* HTML */ <a href="#"><button class="button-04"> Click me!</button></a> /* CSS */ .button-04 { padding: 10px 25px; border: unset; border-radius: 5px; color: #212121; z-index: 1; background: #e8e8e8; position: relative; font-weight: 1000; font-size: 17px; -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); transition: all 250ms; overflow: hidden; } .button-04::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 5px; background-color: #212121; z-index: -1; -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27); transition: all 250ms } .button-04:hover { color: #e8e8e8; } .button-04:hover::before { width: 100%; }
0 Comments