css+js实现可调边框宽度与边角样式的按钮效果代码-html代码-BFW代码库

css+js实现可调边框宽度与边角样式的按钮效果代码

代码语言：html

代码描述：css+js实现可调边框宽度与边角样式的按钮效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />



    <style>
        body {
          min-height: 100vh;
          display: grid;
          place-content: center;
          font-size: clamp(2rem, 1rem + 5vw, 4rem);
        }
        
        .button {
          --background-color: white;
          --border-color: linear-gradient(to bottom right, red, blue);
          --border-width: 0.5em;
          --edge-size: 0.5em;
          cursor: pointer;
          background: var(--background-color);
          padding: 0.5em 1.5em;
          border: 0;
          position: relative;
          isolation: isolate;
          display: inline-grid;
          place-content: center;
          -webkit-clip-path: polygon(var(--edge-size) 0%, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0% var(--edge-size));
                  clip-path: polygon(var(--edge-size) 0%, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0% var(--edge-size));
          transition: color 250ms;
        }
        
        button::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--border-color);
          z-index: -2;
        }
        
        button::after {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--background-color);
          z-index: -1;
          -webkit-clip-path: polygon(var(--border-width) calc(var(--edge-size) + var(--border-width) * 0.5), calc(var(--edge-size) + var(--border-width) * 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)), calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), calc(var(--border-width)) calc(100% - var(--border-width)));
                  clip-path: polygon(var(--border-width) calc(var(--edge-size) + var(--border-width) * 0.5), calc(var(--edge-size) + var(--border-width) * 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)), calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), calc(var(--border-width)) calc(100% - var(--border-width)));
          transition: -webkit-clip-path 500ms;
          transition: clip-path 500ms;
          transition: clip-path 500ms, -webkit-clip-path 500ms;
        }
        
        button:hover {
          color: white;
        }
        
        button:hover::after {
          -webkit-clip-path: polygon(calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size) + var(--border-width) * 0.5)).........完整代码请登录后点击上方下载按钮下载查看