八：多颜色内波纹按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 设置视口，使页面在移动设备上也能良好显示，宽度为设备宽度，初始缩放比例为1.0 -->
<title>多颜色内波纹按钮</title>
<style>
body {
display: grid;
/* 使用网格布局 */
place-items: center;
/* 将所有子元素居中 */
min-height: 100vh;
/* 设置最小高度为视口高度的100% */
overflow: hidden;
/* 隐藏超出容器的内容 */
background-color: #97ccf3;
/* 设置背景颜色 */
}
.ripple-btn {
position: relative;
/* 设置定位方式为相对定位 */
overflow: hidden;
/* 隐藏超出容器的内容 */
border: none;
/* 移除边框 */
background-color: #3acb63;
/* 设置背景颜色 */
color: #fff;
/* 设置文字颜色为白色 */
padding: 30px 40px;
/* 设置内边距 */
font-size: 16px;
/* 设置字体大小 */
cursor: pointer;
/* 设置鼠标悬停时的光标样式为指针 */
outline: none;
/* 移除元素被聚焦时的轮廓 */
border-radius: 20px;
/* 设置边框圆角 */
box-shadow: none;
/* 移除盒阴影 */
}
.ripple-effect {
position: absolute;
/* 设置定位方式为绝对定位 */
border-radius: 50%;
/* 设置边框圆角为50%，形成圆形 */
background-color: rgba(243, 237, 237, 0.6);
/* 设置初始背景颜色，之后会被JS覆盖 */
pointer-events: none;
/* 禁止指针事件，使波纹不影响按钮的点击 */
animation: ripple-animation 1s linear;
/* 应用动画，持续1秒，线性播放 */
transform-origin: center center;
/* 设置变换的原点为元素的中心 */
box-shadow: none;
/* 移除盒阴影 */
}
@keyframes ripple-animation {
from {
transform: scale(1);
/* 起始状态，缩放比例为1 */
opacity: 1;
/* 起始状态，透明度为1 */
}
to {
transform: scale(15);
/* 结束状态，缩放比例为15 */
opacity: 0;
/* 结束状态，透明度为0 */
}
}
</style>
</head>
<body>
<button class="ripple-btn" id="button">
按钮
</button>
<script>
const button = document.querySelector('#button');
// 获取ID为button的按钮元素
const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#33FFF6","#2CDDBF"];
// 定义一个颜色数组，用于波纹的颜色
button.onclick = function (evt) {
// 为按钮添加点击事件监听器
// 创建多个波纹
for (let i = 0; i < 5; i++) {
// 循环5次，创建5个波纹
const ripple = document.createElement("span");
// 创建一个span元素，作为波纹
ripple.classList.add("ripple-effect");
// 为该span元素添加ripple-effect类名
// 使用固定颜色数组中的颜色
const color = colors[i % colors.length];
// 从颜色数组中选择颜色，使用取余运算符确保索引不越界
const size = Math.random() * 30 + 20;
// 生成一个随机大小，范围在20px到50px之间
ripple.style.height = `${
size}px`;
// 设置波纹的高度
ripple.style.width = `${
size}px`;
// 设置波纹的宽度
ripple.style.left = `${
evt.offsetX - size / 2}px`;
// 设置波纹的左边距，使其中心对齐点击位置
ripple.style.top = `${
evt.offsetY - size / 2}px`;
// 设置波纹的上边距，使其中心对齐点击位置
ripple.style.backgroundColor = color;
// 设置波纹的背景颜色
button.appendChild(ripple);
// 将波纹添加到按钮中
// 动画结束后移除波纹（不需要setTimeout了，因为动画不是无限循环）
ripple.addEventListener('animationend', function () {
ripple.remove();
// 动画结束后，移除波纹元素
});
}
}
</script>
</body>
</html>
九：多颜色随机式内波纹按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>多颜色随机式内波纹按钮</title>
<style>
body {
display: grid;
/* 将body布局设置为网格布局 */
place-items: center;
/* 将网格内的元素居中 */
min-height: 100vh;
/* 设置body的最小高度为视口高度的100% */
overflow: hidden;
/* 隐藏页面溢出内容 */
background-color: #97c7e8;
/* 设置背景颜色 */
}
.ripple-btn {
position: relative;
/* 设置按钮的定位方式为相对定位 */
overflow: hidden;
/* 隐藏按钮内容溢出部分 */
border: none;
/* 去掉按钮边框 */
background-color: #3acbc6;
/* 设置按钮背景颜色 */
color: #fff;
/* 设置按钮文字颜色为白色 */
padding: 30px 40px;
/* 设置按钮内边距 */
font-size: 16px;
/* 设置按钮文字大小 */
cursor: pointer;
/* 设置鼠标悬停时显示为指针 */
outline: none;
/* 去掉按钮点击时的轮廓线 */
border-radius: 20px;
/* 设置按钮边框圆角 */
box-shadow: none;
/* 去掉按钮的阴影效果 */
}
.ripple-effect {
position: absolute;
/* 设置波纹的定位方式为绝对定位 */
border-radius: 50%;
/* 设置波纹为圆形 */
background-color: rgba(255, 255, 255, 0.6);
/* 设置波纹的初始背景颜色及透明度 */
pointer-events: none;
/* 禁止波纹响应鼠标事件 */
animation: ripple-animation 0.6s linear infinite;
/* 应用波纹动画，动画时长0.6秒，匀速，无限循环 */
transform-origin: center center;
/* 设置波纹动画的变形原点为中心点 */
box-shadow: none;
/* 去掉波纹的阴影效果 */
}
@keyframes ripple-animation {
from {
transform: scale(1);
opacity: 1;
/* 动画开始时，波纹大小为原始大小，透明度为1 */
}
to {
transform: scale(15);
opacity: 0;
/* 动画结束时，波纹放大到15倍，透明度为0 */
}
}
</style>
</head>
<body>
<button class="ripple-btn" id="button">
按钮
</button>
<!-- 创建一个按钮，并赋予其类名和ID -->
<script>
const button = document.querySelector('#button');
// 通过ID选择器获取按钮元素
button.onclick = function (evt) {
// 为按钮添加点击事件监听器
// 创建多个波纹
for (let i = 0; i < 5; i++) {
// 循环5次，每次创建一个波纹
const ripple = document.createElement("span");
// 创建一个span元素作为波纹
ripple.classList.add("ripple-effect");
// 为波纹添加类名，应用样式
// 随机颜色和大小
const color = `rgba(${
Math.floor(Math.random() * 256)}, ${
Math.floor(Math.random() * 256)}, ${
Math.floor(Math.random() * 256)}, 0.6)`;
// 生成随机颜色，RGBA格式，透明度为0.6
const size = Math.random() * 30 + 20; // 随机大小在20px到50px之间
// 生成随机大小
ripple.style.height = `${
size}px`;
// 设置波纹高度
ripple.style.width = `${
size}px`;
// 设置波纹宽度
ripple.style.left = `${
evt.offsetX - size / 2}px`;
// 设置波纹左偏移量，使波纹中心对准点击位置
ripple.style.top = `${
evt.offsetY - size / 2}px`;
// 设置波纹上偏移量，使波纹中心对准点击位置
ripple.style.backgroundColor = color;
// 设置波纹背景颜色
button.appendChild(ripple);
// 将波纹添加到按钮中
// 在动画结束后移除波纹
setTimeout(() => {
button.removeChild(ripple);
// 通过setTimeout在600毫秒后移除波纹
}, 600);
}
}
</script>
</body>
</html>
十：自定义颜色式内波纹按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义颜色式内波纹按钮</title>
<style>
body {
display: flex;
/* 设置body为flex容器 */
flex-direction: column;
/* 设置flex子项的排列方向为垂直方向 */
align-items: center;
/* 设置flex子项在主轴上的对齐方式为居中 */
justify-content: center;
/* 设置flex子项在交叉轴上的对齐方式为居中 */
min-height: 100vh;
/* 设置最小高度为视口高度的100% */
overflow: hidden;
/* 隐藏超出容器的内容 */
background-color: #a2ceee;
/* 设置背景颜色 */
margin: 0;
/* 设置外边距为0 */
}
#colorPicker {
margin-bottom: 20px;
/* 设置下边距为20px */
}
.ripple-btn {
position: relative;
/* 设置定位方式为相对定位 */
overflow: hidden;
/* 隐藏溢出内容 */
border: none;
/* 去除边框 */
background-color: #3acbc6;
/* 设置背景颜色 */
color: #fff;
/* 设置文字颜色为白色 */
padding: 30px 40px;
/* 设置内边距 */
font-size: 16px;
/* 设置字体大小 */
cursor: pointer;
/* 设置鼠标悬停时的光标样式为指针 */
outline: none;
/* 去除元素获得焦点时的轮廓线 */
border-radius: 20px;
/* 设置边框圆角 */
box-shadow: none;
/* 去除盒阴影 */
}
.ripple-effect {
position: absolute;
/* 设置定位方式为绝对定位 */
border-radius: 50%;
/* 设置圆形边框 */
pointer-events: none;
/* 禁止鼠标事件 */
animation: ripple-animation 0.6s linear forwards;
/* 设置动画 */
transform-origin: center center;
/* 设置变换的原点为元素的中心 */
box-shadow: none;
/* 去除盒阴影 */
}
@keyframes ripple-animation {
/* 定义动画关键帧 */
from {
transform: scale(1);
/* 起始状态，缩放比例为1 */
opacity: 1;
/* 起始状态，不透明度为1 */
}
to {
transform: scale(15);
/* 结束状态，缩放比例为15 */
opacity: 0;
/* 结束状态，不透明度为0 */
}
}
</style>
</head>
<body>
<input type="color" id="colorPicker" value="#ffffff" />
<!-- 颜色选择器的初始颜色为白色 -->
<button class="ripple-btn" id="button">
按钮
</button>
<!-- 带有波纹效果的按钮 -->
<script>
const button = document.querySelector('#button');
// 获取按钮元素
const colorPicker = document.querySelector('#colorPicker');
// 获取颜色选择器元素
button.onclick = function (evt) {
// 当按钮被点击时执行此函数，evt为事件对象
const selectedColor = colorPicker.value;
// 获取用户选择的颜色
// 创建多个波纹
for (let i = 0; i < 5; i++) {
const ripple = document.createElement("span");
// 创建一个span元素作为波纹
ripple.classList.add("ripple-effect");
// 给span元素添加ripple-effect类
// 随机大小
const size = Math.random() * 30 + 20;
// 生成一个20px到50px之间的随机数作为波纹大小
ripple.style.height = `${
size}px`;
// 设置波纹的高度
ripple.style.width = `${
size}px`;
// 设置波纹的宽度
ripple.style.left = `${
evt.offsetX - size / 2}px`;
// 设置波纹的左边距，使其中心对齐点击位置
ripple.style.top = `${
evt.offsetY - size / 2}px`;
// 设置波纹的上边距，使其中心对齐点击位置
// 使用用户选择的颜色
ripple.style.backgroundColor = selectedColor;
// 设置波纹的背景颜色为用户选择的颜色
button.appendChild(ripple);
// 将波纹添加到按钮中
// 在动画结束后移除波纹
setTimeout(() => {
button.removeChild(ripple);
// 0.6秒后移除波纹
}, 600);
}
}
</script>
</body>
</html>
十一：外波纹彩虹按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>外波纹彩虹按钮</title>
<style>
body {
display: grid;
/* 使用网格布局 */
place-items: center;
/* 将子元素居中放置 */
min-height: 100vh;
/* 设置最小高度为视口高度的100% */
margin: 0;
/* 去除默认的边距 */
background-color: #b3eec4;
/* 设置背景颜色 */
overflow: hidden;
/* 初始时禁止滚动，但会在JS中动态控制 */
}
.ripple-btn {
position: relative;
/* 设置相对定位，以便子元素（波纹）可以绝对定位 */
border: none;
/* 去除边框 */
background-color: #23ea00;
/* 设置背景颜色 */
color: #fff;
/* 设置文字颜色为白色 */
padding: 20px 40px;
/* 设置内边距 */
font-size: 18px;
/* 设置字体大小 */
font-weight: bold;
/* 设置字体加粗 */
cursor: pointer;
/* 设置鼠标悬停时的光标样式为指针 */
outline: none;
/* 去除点击时的轮廓 */
border-radius: 20px;
/* 设置圆角 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
/* 设置阴影效果 */
transition: background-color 0.3s, transform 0.3s;
/* 设置背景颜色和变换的过渡效果 */
}
.ripple-btn:hover {
background-color: #46cbec;
/* 设置鼠标悬停时的背景颜色 */
}
.ripple-effect {
position: absolute;
/* 设置绝对定位，相对于最近的已定位祖先元素（这里是.ripple-btn） */
border-radius: 50%;
/* 设置圆形 */
background: radial-gradient(circle, red, yellow, lime, aqua, blue, magenta, red);
/* 设置径向渐变背景色 */
pointer-events: none;
/* 禁止鼠标事件，使波纹不影响按钮的点击 */
animation: ripple-animation 0.8s forwards;
/* 应用动画，持续0.8秒，动画结束后保持最终状态 */
transform-origin: center;
/* 设置变换的原点为中心 */
}
@keyframes ripple-animation {
/* 定义动画关键帧 */
from {
transform: scale(1);
/* 起始时波纹大小为原始大小 */
opacity: 1;
/* 起始时不透明度为1 */
}
to {
transform: scale(15);
/* 结束时波纹大小放大到15倍 */
opacity: 0;
/* 结束时不透明度为0 */
}
}
.no-scroll {
overflow: hidden;
/* 禁止滚动 */
}
</style>
</head>
<body>
<button class="ripple-btn" id="button">
按钮
</button>
<script>
const button = document.querySelector('#button');
button.onclick = function (evt) {
// 禁止页面滚动
document.body.classList.add('no-scroll');
// 给body元素添加no-scroll类，禁止滚动
// 创建一个新的波纹元素
const ripple = document.createElement("span");
// 创建一个span元素作为波纹
ripple.classList.add("ripple-effect");
// 给波纹元素添加ripple-effect类
// 根据按钮和点击位置，计算波纹的大小和起始位置
const {
offsetX, offsetY, target } = evt;
// 从事件对象中获取点击位置相对于按钮的偏移量和目标元素（按钮）
const size = Math.max(target.clientWidth, target.clientHeight) * 2;
// 计算波纹的大小，为按钮宽高最大值的两倍
ripple.style.width = ripple.style.height = `${
size}px`;
// 设置波纹的宽度和高度
ripple.style.left = `${
offsetX - size / 2}px`;
ripple.style.top = `${
offsetY - size / 2}px`;
// 设置波纹的left和top，使其中心对准点击位置
// 将波纹元素添加到按钮中，并在动画结束后移除
target.appendChild(ripple);
// 将波纹元素添加到按钮中
ripple.addEventListener('animationend', function () {
// 为波纹元素添加动画结束事件处理函数
ripple.remove();
// 动画结束后移除波纹元素
document.body.classList.remove('no-scroll');
// 移除no-scroll类，恢复滚动
});
}
</script>
</body>
</html>
十二：手绘风格式按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手绘风格式按钮</title>
<style>
/* 定义按钮的样式 */
button {
--clr: #F9F6EF; /* 定义一个CSS变量--clr，用于后续的颜色引用 */
--fg: #1f2020; /* 定义一个CSS变量--fg，用于文字颜色 */
border: none; /* 去掉按钮的边框 */
cursor: pointer; /* 鼠标悬停时显示为手指图标，表示可点击 */
color: var(--fg); /* 使用--fg变量设置文字颜色 */
background: transparent; /* 设置按钮背景为透明 */
padding: 0.7em 1.2em; /* 设置按钮的内边距 */
font-size: 1.4rem; /* 设置字体大小 */
font-weight: 700; /* 设置字体加粗 */
font-family: inherit; /* 字体家族继承父元素 */
width: max-content; /* 宽度自适应内容 */
position: relative; /* 设置相对定位，为伪元素定位做准备 */
text-align: center; /* 文字居中 */
transition: transform 0.1s linear, filter 0.1s linear; /* 添加过渡效果，改变transform和filter属性时产生动画效果 */
filter: drop-shadow(0.1em 0.1em 0.1em rgba(249, 246, 239, 0.5)); /* 添加阴影效果 */
}
/* 定义按钮的伪元素::before，用于创建手绘风格的边框 */
button::before {
position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是button） */
content: ""; /* 伪元素必须有内容，这里为空字符串 */
top: 0; right: 0; bottom: 0; left: 0; /* 使伪元素覆盖整个按钮 */
padding: 0.1em; /* 内边距，使边框与按钮内容有间距 */
border: 4px double var(--clr); /* 使用--clr变量设置双线边框 */
border-radius: 0.1em 0.2em/0.5em 0.23em; /* 边框圆角 */
z-index: -1; /* 使伪元素位于按钮内容之下 */
transition: 0.25s ease; /* 过渡效果，使边框变化更平滑 */
background-clip: content-box; /* 背景只应用到内容区域，不包括边框 */
}
/* 定义按钮按下时的样式 */
button:active {
transform: translate(0.05em, 0.1em); /* 按下时按钮稍微移动，模拟按下效果 */
filter: drop-shadow(-0.1em -0.1em 0.1em rgba(249, 246, 239, 0.5)); /* 阴影方向改变，模拟按下效果 */
}
/* 定义按钮获得焦点时的样式 */
button:focus {
outline: 2px dashed rgba(249, 246, 239, 0.9); /* 焦点时的外边框样式 */
outline-offset: 0.5rem; /* 外边框与元素内容的距离 */
border-radius: 0.25em; /* 外边框圆角 */
}
/* 定义.but1类的样式，用于特定按钮 */
.but1{
--clr: hsl(80, 75%, 75%); /* 覆盖--clr变量的值，改变按钮边框颜色 */
}
/* 为.but1类的伪元素::before添加滤镜效果 */
.but1::before {
filter: url("#squiggly-1"); /* 应用SVG滤镜，实现手绘效果 */
}
/* 定义.squigglysvg类的样式，用于隐藏SVG元素 */
.squigglysvg {
display: none; /* 隐藏SVG元素 */
position: absolute; /* 绝对定位，确保不影响页面布局 */
width: 0; height: 0; /* 尺寸设置为0，确保不占用空间 */
}
/* 定义body的样式 */
body {
font-family: "Merienda", cursive; /* 设置字体为"Merienda"，如果不可用则使用默认的cursive字体 */
min-height: 100vh; /* 最小高度为视口高度的100% */
margin: 0; /* 去掉默认的外边距 */
display: grid; /* 使用网格布局 */
grid-template-columns: 1fr 1fr; /* 定义两列，每列占据相等的空间 */
place-content: center; /* 内容在网格中居中 */
place-items: center; /* 每个网格项在其单元格中居中 */
gap: 2em; /* 网格项之间的间距 */
background-color: #1f2020; /* 背景颜色 */
background-image: radial-gradient(#535150, #1f2020); /* 背景图像为径向渐变 */
}
/* 定义奇数按钮的样式，使其靠右对齐 */
button:nth-of-type(2n-1) {
justify-self: right; /* 在网格单元格中靠右对齐 */
}
/* 定义偶数按钮的样式，使其靠左对齐 */
button:nth-of-type(2n) {
justify-self: left; /* 在网格单元格中靠左对齐 */
}
</style>
</head>
<body>
<button class="but1">按钮</button>
<!-- 定义SVG元素，包含多个滤镜定义，用于实现手绘效果 -->
<svg class="squigglysvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 定义滤镜id="squiggly-0"，通过湍流和位移映射实现手绘效果 -->
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<!-- 类似地，定义其他滤镜，通过改变seed和scale实现不同的手绘效果 -->
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-5">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="9"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
</defs>
</svg>
</body>
</html>
十三：手绘风格式波纹填充按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>手绘风格式波纹填充按钮</title>
<style>
button {
--clr: #F9F6EF; /* 设置CSS变量clr，用于后续的颜色引用 */
--fg: #1f2020; /* 设置CSS变量fg，用于文字颜色 */
border: none; /* 移除按钮边框 */
cursor: pointer; /* 鼠标悬停时显示为指针 */
color: var(--fg); /* 使用CSS变量设置文字颜色 */
background: transparent; /* 设置按钮背景透明 */
padding: 0.7em 1.2em; /* 设置按钮内边距 */
font-size: 1.4rem; /* 设置字体大小 */
font-weight: 700; /* 设置字体加粗 */
font-family: inherit; /* 继承父元素的字体家族 */
width: max-content; /* 设置宽度为内容最大宽度 */
position: relative; /* 设置相对定位 */
text-align: center; /* 文字居中 */
transition: transform 0.1s linear, filter 0.1s linear; /* 设置变换和滤镜的过渡效果 */
filter: drop-shadow(0.1em 0.1em 0.1em rgba(249, 246, 239, 0.5)); /* 添加阴影效果 */
}
button::before {
/* 为button元素添加伪元素 */
--clrs1: rgba(0, 0, 0, 0.5); /* 设置CSS变量clrs1 */
--clrs2: rgba(0, 0, 0, 0.2); /* 设置CSS变量clrs2 */
--clrs3: rgba(0, 0, 0, 0.6); /* 设置CSS变量clrs3 */
--clrs4: rgba(0, 0, 0, 0.98); /* 设置CSS变量clrs4 */
position: absolute; /* 设置绝对定位 */
content: ""; /* 必须设置内容以生成伪元素 */
top: 0; right: 0; bottom: 0; left: 0; /* 使伪元素覆盖整个按钮 */
padding: 0.1em; /* 设置内边距 */
border: 4px double var(--clr); /* 使用CSS变量设置边框样式 */
border-radius: 0.1em 0.2em/0.5em 0.23em; /* 设置边框圆角 */
z-index: -1; /* 使伪元素位于按钮下方 */
transition: 0.25s ease; /* 设置过渡效果 */
background: linear-gradient(178deg, var(--clrs1), var(--clrs2) 20% 70%, var(--clrs3) 90%, var(--clrs4)) 0 0/100% 0.3rem;
/* 设置线性渐变背景 */
background-clip: content-box; /* 背景裁剪到内容框 */
}
button:active {
/* 当按钮处于活动状态（被点击）时的样式 */
transform: translate(0.05em, 0.1em); /* 设置位移效果 */
filter: drop-shadow(-0.1em -0.1em 0.1em rgba(249, 246, 239, 0.5)); /* 修改阴影效果 */
}
button:focus {
/* 当按钮获得焦点时的样式 */
outline: 2px dashed rgba(249, 246, 239, 0.9); /* 设置焦点轮廓 */
outline-offset: 0.5rem; /* 设置轮廓偏移 */
border-radius: 0.25em; /* 设置轮廓圆角 */
}
.but1 {
--clr: #F9F6EF; /* 为.but1类设置CSS变量clr */
}
.but1::before {
filter: url("#squiggly-0"); /* 应用SVG滤镜效果 */
}
.but1:active::before {
filter: url("#squiggly-5"); /* 当按钮处于活动状态时应用不同的SVG滤镜效果 */
}
.squigglysvg {
display: none; /* 隐藏SVG元素 */
}
body {
font-family: "Merienda", cursive; /* 设置页面字体 */
min-height: 100vh; /* 设置页面最小高度为视口高度 */
margin: 0; /* 移除页面边距 */
display: grid; /* 设置页面为网格布局 */
grid-template-columns: 1fr 1fr; /* 设置两列，等宽 */
place-content: center; /* 内容居中 */
place-items: center; /* 项目居中 */
gap: 2em; /* 设置网格项之间的间隙 */
background-color: #1f2020; /* 设置背景颜色 */
background-image: radial-gradient(#535150, #1f2020); /* 设置径向渐变背景 */
}
button:nth-of-type(2n-1) {
justify-self: right; /* 奇数按钮右对齐 */
}
button:nth-of-type(2n) {
justify-self: left; /* 偶数按钮左对齐 */
}
</style>
</head>
<body>
<button class="but1">按钮</button>
<!-- 创建一个带有.but1类的按钮，按钮文字为“按钮” -->
<svg class="squigglysvg" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 定义一个SVG元素，用于滤镜效果 -->
<defs>
<filter id="squiggly-0">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="0"></feturbulence>
<fedisplacementmap id="displacement" in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-1">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="1"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="8"></fedisplacementmap>
</filter>
<filter id="squiggly-2">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="2"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-3">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="3"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="8"></fedisplacementmap>
</filter>
<filter id="squiggly-4">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="4"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-5">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="9"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
</defs>
</svg>
</body>
</html>
十四：手绘风格式水波纹按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手绘风格式水波纹按钮</title>
<style>
button {
--clr: #F9F6EF; /* 定义CSS变量--clr，用于背景色 */
--fg: #1f2020; /* 定义CSS变量--fg，用于文字颜色 */
border: none; /* 去掉按钮的边框 */
cursor: pointer; /* 鼠标悬停时显示为手型 */
color: var(--fg); /* 使用CSS变量设置文字颜色 */
background: transparent; /* 设置按钮背景为透明 */
padding: 0.7em 1.2em; /* 设置按钮内边距 */
font-size: 1.4rem; /* 设置字体大小 */
font-weight: 700; /* 设置字体加粗 */
font-family: inherit; /* 继承父元素的字体 */
width: max-content; /* 设置宽度为内容最大宽度 */
position: relative; /* 设置定位方式为相对定位 */
text-align: center; /* 设置文本居中 */
transition: transform 0.1s linear, filter 0.1s linear; /* 设置变换和滤镜的过渡效果 */
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.5)); /* 添加阴影效果 */
}
/* 定义按钮伪元素::before的样式，用于创建按钮的外框和背景 */
button::before {
position: absolute; /* 设置定位方式为绝对定位 */
content: ""; /* 必须设置内容以生成盒子模型 */
top: 0; right: 0; bottom: 0; left: 0; /* 设置四边距离为0，覆盖整个按钮 */
padding: 0.1em; /* 设置内边距 */
border: 4px double var(--clr); /* 使用CSS变量设置边框样式 */
border-radius: 0.1em 0.2em/0.5em 0.23em; /* 设置边框圆角 */
z-index: -1; /* 设置层级，使其在按钮文字下方 */
transition: 0.25s ease; /* 设置过渡效果 */
background: linear-gradient(178deg, #5ec49d, #2ec1bc 20% , #326f99 90%, #4031c4) 0 0/100% 0.3rem;
/* 设置背景为线性渐变，并定义渐变方向和颜色 */
background-clip: content-box; /* 背景被裁剪到内容框 */
}
/* 定义按钮活动状态的样式 */
button:active {
transform: translate(0.05em, 0.1em); /* 点击时按钮略微移动 */
filter: drop-shadow(-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.5)); /* 点击时阴影方向改变 */
}
/* 定义按钮获得焦点时的样式 */
button:focus {
outline: 2px dashed rgba(249, 246, 239, 0.9); /* 设置焦点时的外轮廓样式 */
outline-offset: 0.5rem; /* 设置轮廓偏移 */
border-radius: 0.25em; /* 设置轮廓圆角 */
}
/* 定义.but3类的样式，用于特定按钮 */
.but3 {
--clr: hsl(180, 75%, 75%); /* 修改CSS变量--clr的值 */
}
/* 定义.but3类按钮伪元素::before的样式 */
.but3::before {
filter: url("#squiggly-2"); /* 应用SVG滤镜效果 */
}
/* 定义.but3类按钮活动状态时伪元素::before的样式 */
.but3:active::before {
filter: url("#squiggly-5"); /* 活动状态时应用不同的SVG滤镜效果 */
}
/* 定义.squigglysvg类的样式，用于隐藏SVG元素 */
.squigglysvg {
display: none; /* 隐藏SVG元素 */
position: absolute; /* 设置定位方式为绝对定位 */
width: 0; height: 0; /* 设置宽高为0 */
}
/* 定义body元素的样式 */
body {
font-family: "Merienda", cursive; /* 设置字体 */
min-height: 100vh; /* 设置最小高度为视口高度 */
margin: 0; /* 去掉外边距 */
display: grid; /* 设置布局方式为网格布局 */
grid-template-columns: 1fr 1fr; /* 设置网格列模板，两列等分 */
place-content: center; /* 设置内容居中 */
place-items: center; /* 设置项目居中 */
gap: 2em; /* 设置网格项之间的间距 */
background-color: #1f2020; /* 设置背景颜色 */
background-image: radial-gradient(#535150, #1f2020); /* 设置背景为径向渐变 */
}
/* 设置奇数按钮的样式，使其靠右对齐 */
button:nth-of-type(2n-1) {
justify-self: right;
}
/* 设置偶数按钮的样式，使其靠左对齐 */
button:nth-of-type(2n) {
justify-self: left;
}
</style>
</head>
<body>
<button class="but3">按钮</button>
<!-- 定义SVG元素，包含多个滤镜定义，用于按钮的特效 -->
<svg class="squigglysvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 定义滤镜squiggly-0，使用湍流和位移映射创建特效 -->
<filter id="squiggly-0">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="0"></feturbulence>
<fedisplacementmap id="displacement" in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-1">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="1"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="8"></fedisplacementmap>
</filter>
<filter id="squiggly-2">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="2"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-3">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="3"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="8"></fedisplacementmap>
</filter>
<filter id="squiggly-4">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="4"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
<filter id="squiggly-5">
<feturbulence id="turbulence" basefrequency="0.02" numoctaves="3" result="noise" seed="9"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="noise" scale="6"></fedisplacementmap>
</filter>
</defs>
</svg>
</body>
</html>
十五：手绘风格式填充色按钮
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手绘风格式填充色按钮</title>
<style>
button {
--clr: #F9F6EF;
--fg: #1f2020;
border: none;
cursor: pointer;
color: var(--fg);
background: var(--clr); /* 使用自定义属性设置背景色 */
padding: 0.7em 1.2em;
font-size: 1.4rem;
font-weight: 700;
font-family: inherit;
width: max-content;
position: relative;
text-align: center;
transition: transform 0.1s linear, filter 0.1s linear;
filter: drop-shadow(0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2));
}
button::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0.1em;
border: 4px double var(--fg);
border-radius: 0.1em 0.2em/0.5em 0.23em;
z-index: -1;
transition: 0.25s ease;
background-clip: content-box;
}
button:active {
transform: translate(0.05em, 0.1em);
filter: drop-shadow(-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.2));
}
button:focus {
outline: 2px dashed rgba(249, 246, 239, 0.9);
outline-offset: 0.5rem;
border-radius: 0.25em;
}
.but1 {
--clr: #F9F6EF;
}
.but1::before {
filter: url("#squiggly-0");
}
.but1:active::before {
filter: url("#squiggly-5");
}
.squigglysvg {
display: none;
position: absolute;
width: 0;
height: 0;
}
body {
font-family: "Merienda", cursive;
min-height: 100vh;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
place-content: center;
place-items: center;
gap: 2em;
background-color: #1f2020;
background-image: radial-gradient(#535150, #1f2020);
}
button:nth-of-type(2n-1) {
justify-self: right;
}
button:nth-of-type(2n) {
justify-self: left;
}
</style>
</head>
<body>
<button class="but1">按钮</button>
<svg class="squigglysvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="squiggly-0">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-1">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-2">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-3">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8"></feDisplacementMap>
</filter>
<filter id="squiggly-4">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
<filter id="squiggly-5">
<feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="9"></feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6"></feDisplacementMap>
</filter>
</defs>
</svg>
</body>
</html>
END~
