/* HTML */ <a href="#"><button class="button-25">Button</button></a> /* CSS */ .button-25 { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; font-weight: bold; padding: 0.7em 2em; border: 3px solid #FF0072; border-radius: 2px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); color: #FF0072; text-decoration: none; transition: 0.3s ease all; z-index: 1; } .button-25:before { transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #FF0072; z-index: -1; } .button-25:hover, .button-25:focus { color: white; } .button-25:hover:before, .button-25:focus:before { transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } .button-25:active { transform: scale(0.9); }
0 Comments