/* HTML */ <a href="#"><button class="button-29">Button</button></a> /* CSS */ .button-29 { width: fit-content; height: 45px; background: #ffffff0d; border-radius: 8px; border: 2px solid #334b79; font-size: 15px; font-weight: bold; color: #334b79; -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: relative; overflow: hidden; padding: 10px 25px; z-index: 1; } .button-29:before { width: 50%; height: 100%; content: ""; margin: auto; position: absolute; top: 0%; left: -50%; background: #334b79; transition: all 0.5s ease; z-index: -1; } .button-29:after { width: 50%; height: 100%; content: ""; margin: auto; position: absolute; top: 0%; left: 100%; background: #334b79; transition: all 0.5s ease; z-index: -1; } .button-29:hover { color: white; cursor: pointer; } .button-29:hover:before { top: 0; left: 0; } .button-29:hover:after { top: 0; left: 50%; }
0 Comments