html and css 制作hover响应式动画按钮设计id1134-网页前端设计
Warning: Undefined property: stdClass::$maxbutton id="5" in /www/wwwroot/code.5g-o.com/wp-content/plugins/kama-clic-counter/class.KCCounter.php on line 733
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; }
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品