|
|
整体效果
html 页面
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="style.css">
- <title>好看的倒影按钮</title>
- </head>
- <body>
- <div class="app">
- <button class="btn89">BUTTON</button>
- </div>
- </body>
- </html>
- .app{
- width: 100%;
- height: 100vh;
- background-color: #ffffff;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .btn89{
- padding: 16px 24px;
- border: none;
- outline: none;
- border-radius: 0.4rem;
- cursor: pointer;
- font-size: 16px;
- font-weight: bold;
- background-color: #1b81ff;
- color: #ffffff;
- transition: all 0.6s ease-in-out;
- box-shadow: 0px 4px 16px rgba(0,0,0,0.2);
- box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));
- -webkit-box-reflect: below 4px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.3));
- }
- .btn89:hover{
- color: #000000;
- background: #ff6102;
- }
|
|
|Archiver|手机版|小黑屋|爬行的蜗牛
( 蒙ICP备2023005932号-1 )
发表于 2024-12-2 11:59:50
