Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Der Titel des Dokuments</title> <style> body { background: #560059; color:#eeeeee; font-family:Arial; font-size:16px; } .wrapper { margin: 80px auto; text-align: center; width: 100%; position: relative; } .button { padding: 15px 100px; margin:10px 4px; color: #eee; font-family: sans-serif; text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:inline-block; border:1px solid ; } .button::before{ content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: -1; -webkit-transform: scaleY(.1); transform: scaleY(.1); transition: all .4s } .button:hover{ color:#b414ba; } .button:hover::before{ opacity: 1; background-color: #f7c2f9; -webkit-transform: scaleY(1); transform: scaleY(1); transition: -webkit-transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity .4s; transition: transform .6s cubic-bezier(.08, .35, .13, 1.02), opacity } </style> </head> <body> <div class="wrapper"> <span class="button">Button 1</span> <span class="button">Button 2</span> </div> </body> </html>