设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 好玩的css按钮 (可复制源码)
返回列表 发新帖
查看: 67|回复: 0

好玩的css按钮 (可复制源码)

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:47:57 | 显示全部楼层 |阅读模式
预览效果

111.gif

源码

  1. <!DOCTYPE html>
  2. <html lang="zh">

  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>渐隐式按钮</title>
  7.     <style>
  8.         .app {
  9.             width: 100%;
  10.             height: 100vh;
  11.             background-color: #fff;
  12.             position: relative;
  13.             display: flex;
  14.             justify-content: center;
  15.             align-items: center;
  16.         }

  18.         .macaron-btn {
  19.             width: 120px;
  20.             height: 48px;
  21.             font-size: 16px;
  22.             font-weight: bold;
  23.             color: #fff;
  24.             letter-spacing: 2px;
  25.             position: relative;
  26.             border: none;
  27.             outline: none;
  28.             background-color: #87CEFA; /* 马卡龙浅蓝色 */
  29.             border-radius: 7px;
  30.             cursor: pointer;
  31.             box-shadow: 0 0 0 4px #6495ED; /* 较深的马卡龙蓝色 */
  32.             transition: all 0.1s linear;
  33.         }

  35.         .macaron-btn:after {
  36.             content: '按钮哦~';
  37.             width: 100%;
  38.             font-size: 16px;
  39.             font-weight: bold;
  40.             color: #6495ED; /* 较深的马卡龙蓝色 */
  41.             letter-spacing: 2px;
  42.             position: absolute;
  43.             left: 0;
  44.             opacity: 1;
  45.             transition: all 0.3s linear;
  46.         }

  48.         .macaron-btn:hover:after {
  49.             opacity: 0;
  50.             transform: translateY(-20px);
  51.         }

  53.         .macaron-btn:active {
  54.             transform: scale(0.99);
  55.             box-shadow: 0 0 0 2px #6495ED; /* 较深的马卡龙蓝色 */
  56.         }
  57.     </style>
  58. </head>

  60. <body>
  61.     <div class="app">
  62.         <button class="macaron-btn">按钮哦~</button>
  63.     </div>
  64. </body>

  66. </html>
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表