html and css 制作hover响应式动画按钮设计id1134-网页前端设计
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <button class="btn btn1">Hover me</button> <button class="btn btn2">Hover me</button> <button class="btn btn3">Hover me</button> <button class="btn btn4">Hover me</button> </div> </body> </html>
css
body{ margin: 0; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f1f1f1; } .container{ perspective: 320px; } .btn{ display: block; margin: 40px 0; width: 240px; height: 80px; border: none; background-color: #e15f41; color: #fff; font-size: 18px; border-radius: 6px; outline: none; cursor: pointer; transition: .3s linear; } .btn1:hover{ transform: rotateX(15deg); box-shadow: 0 15px 15px #e15f4190; } .btn2:hover{ transform: rotateX(-15deg); box-shadow: 0 -15px 15px #e15f4190; } .btn3:hover{ transform: rotateY(15deg); box-shadow: -15px 0px 15px #e15f4190; } .btn4:hover{ transform: rotateY(-15deg); box-shadow: 15px 0 15px #e15f4190; }
