ZIPCSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip 1.68KB

uuplay0216

资源文件列表:

CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip 大约有1个文件
  1. CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.html 2.46KB

资源介绍:

CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效.zip --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS技巧专栏一日一例：20 -纯CSS实现点击时会凹陷下去的按钮特效</title> <style> *{ margin:0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root{ --main-bg-color: #eaeaea; --color:#000; --hover-bg:#fff; } body { width:100%; height: auto; background: var(--main-bg-color); } button{ outline: 0; border: none; } .container{ /* 居中 */ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:auto; } .base{ position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ，并确保了按钮文字水平方向居中 */ font-family: "微软雅黑", sans-serif; font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700; color: var(--color); /* 文字颜色为预定义的前景色 */ cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */ user-select: none; /* 让用户不能选择按钮上的文字 */ white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */ border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */ transition: all .5s; /* 按钮响应动画效果的持续时间 */ margin: 1.5rem 2rem; } /* 凹下去的按钮 */ .push_down{ color: #333; cursor: pointer; border:1px solid var(--main-bg-color); height: 60px; background: var(--main-bg-color); transition: 0.3s; text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); } .push_down:hover{ background-color: var(--hover-bg); /* box-shadow: 0 0px 30px 0 rgba(225, 225, 225, 1),inset 0 1px 0 0 rgba(255, 255, 255, 0.7); */ } .push_down:active{ color: #666; box-shadow:0px 1px 30px rgba(0, 0, 0, 0.03)inset, 2px 2px 2px rgba(0, 0, 0, 0.029)inset,0px 1px 1px rgba(0, 0, 0, 0.06) inset,0px -1px 0px rgba(255, 255, 255, 0.06) inset,5px 5px 6px rgba(0, 0, 0, 0.027) inset,10px 9px 12px rgba(0, 0, 0, 0.07) inset; text-shadow: 1px 2px 1px rgba(255, 255, 255,1); transition: 0.3s; } </style> </head> <body> <div class="container"> <button class="base push_down">会凹陷的按钮</button> <button class="base push_down" >凹下的按钮</button> </div> </body> </html>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPCSS+js 做漂亮时钟.zip53.83KB8月前
    ZIPprotoc3.19的window下载安装包1.41MB8月前
    ZIP车辆路径问题常用数据集，带时间窗约束的车辆路径规划问题(VRPTW)、容量限制的车辆路径问题(CVRP)76.14KB8月前
    ZIP多目标鲸鱼优化算法matlab代码13.58KB8月前
    ZIP阿里云MQTT新手教程20.45MB8月前
    ZIPLinux学习笔记 1.zip8.21MB8月前
    ZIPGD32F130最小系统板124.63KB8月前
    ZIPQT的学习笔记.zip1.35MB8月前