<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>5个不错的CSS3鼠标滑过按钮动画</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="reset.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- partial:index.partial.html --> <section class="buttons"> <h1>CSS3鼠标滑过按钮动画</h1> <div class="container"> <a href="#" class="btn btn-1"> <svg> <rect x="0" y="0" fill="none" width="100%" height="100%"/> </svg> Hover </a> <!--svg hover inspired by https://codepen.io/karimbalaa/pen/qERbBY?editors=110 --> <!--End of Button 1 --> <a href="#" class="btn btn-2">Hover</a> <!--End of Button 2 --> <a href="#" class="btn btn-3">Hover</a> <!--End of Button 3 --> <a href="#" class="btn btn-4"><span>Hover</span></a> <!--End of Button 4 --> <a href="#" class="btn btn-5">Hover</a> <!--End of Button 5 --> </div> </section> <!-- partial --> <script src='jquery.min.js'></script> </body> </html>