Quote: I got you the code with but took my trying in the code(I already tried several things but it always came down to an error)
<pre><a class="button" href="#"></a> <button type="button">Click me!</button>
.button { display: inline-block; margin-top: 10%; padding: 1em 2em; font-size: 2em; color: #fff; font-family: arial, sans-serif; text-decoration: none; border-radius: 0.3em; position: relative; background-color: #ccc; background-image: linear-gradient(to top, #6d8aa0, #8ba2b4); -webkit-backface-visibility: hidden; z-index: 1; } .button:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background-image: linear-gradient(to top, #ca5f5e, #d68584); transition: opacity 0.5s ease-out; z-index: 2; opacity: 0; } body { text-align: center; background: #ddd; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)