css+svg的filter实现手写按钮效果代码-html代码-BFW代码库

css+svg的filter实现手写按钮效果代码

代码语言：html

代码描述：css+svg的filter实现手写按钮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400..700&family=Indie+Flower&family=Merienda:wght@300..900&display=swap");
button {
  --clr: #F9F6EF;
  --fg: #1f2020;
  border: none;
  cursor: pointer;
  color: var(--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: 0.1s linear;
  filter: drop-shadow(0.1em 0.1em 0.1em color-mix(in srgb, var(--clr), transparent 50%));
}
button:before {
  --clrs1: color-mix(in lab, var(--clr), #0000 50%);
  --clrs2: color-mix(in lab, var(--clr), #0000 20%);
  --clrs3: color-mix(in lab, var(--clr), #0000 60%);
  --clrs4: color-mix(in lab, var(--clr), .........完整代码请登录后点击上方下载按钮下载查看