22个炫酷css按钮

2023-10-09 408 阅读 0评论
源码（cv即见效）：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
      }

      button {
        margin-left: 20px;
        margin-bottom: 40px;
      }

      .btn-1 {
        background-color: #aa55ff;
        border-radius: 8px;
        border-style: none;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        height: 40px;
        line-height: 20px;
        list-style: none;
        outline: none;
        padding: 10px 16px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: color 100ms;
        vertical-align: baseline;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-1:hover,
      .btn-1:focus {
        background-color: #aaaaff;
      }


      .btn-2 {
        align-items: center;
        background-clip: padding-box;
        background-color: #fa6400;
        border: 1px solid transparent;
        border-radius: .25rem;
        box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        justify-content: center;
        line-height: 1.25;
        height: 40px;
        padding: calc(.875rem - 1px) calc(1.5rem - 1px);
        position: relative;
        text-decoration: none;
        transition: all 250ms;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        width: auto;
      }

      .btn-2:hover,
      .btn-2:focus {
        background-color: #fb8332;
        box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
      }

      .btn-2:hover {
        transform: translateY(-1px);
      }

      .btn-2:active {
        background-color: #c85000;
        box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
        transform: translateY(0);
      }


      .btn-3 {
        padding: 6px 14px;
        font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
        border-radius: 6px;
        border: none;
        color: #fff;
        background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%);
        background-origin: border-box;
        box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-3:focus {
        box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
        outline: 0;
      }


      .btn-4 {
        background-color: #fff;
        border: 1px solid #d5d9d9;
        border-radius: 8px;
        box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
        box-sizing: border-box;
        color: #0f1111;
        cursor: pointer;
        display: inline-block;
        font-family: "Amazon Ember", sans-serif;
        font-size: 13px;
        line-height: 29px;
        padding: 0 10px 0 11px;
        position: relative;
        text-align: center;
        text-decoration: none;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: middle;
        width: 100px;
      }

      .btn-4:hover {
        background-color: #f7fafa;
      }

      .btn-4:focus {
        border-color: #008296;
        box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
        outline: 0;
      }


      .btn-5 {
        background-image: linear-gradient(#f7f8fa, #e7e9ec);
        border-color: #adb1b8 #a2a6ac #8d9096;
        border-style: solid;
        border-width: 1px;
        border-radius: 3px;
        box-shadow: rgba(255, 255, 255, .6) 0 1px 0 inset;
        box-sizing: border-box;
        color: #0f1111;
        cursor: pointer;
        display: inline-block;
        font-family: "Amazon Ember", Arial, sans-serif;
        font-size: 14px;
        height: 29px;
        font-size: 13px;
        outline: 0;
        overflow: hidden;
        padding: 0 11px;
        text-align: center;
        text-decoration: none;
        text-overflow: ellipsis;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        white-space: nowrap;
      }

      .btn-5:active {
        border-bottom-color: #a2a6ac;
      }

      .btn-5:active:hover {
        border-bottom-color: #a2a6ac;
      }

      .btn-5:hover {
        border-color: #a2a6ac #979aa1 #82858a;
      }

      .btn-5:focus {
        border-color: #e77600;
        box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px;
        outline: 0;
      }



      .btn-6 {
        align-items: center;
        appearance: none;
        background-color: #fff;
        border-radius: 24px;
        border-style: none;
        box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
        box-sizing: border-box;
        color: #3c4043;
        cursor: pointer;
        display: inline-flex;
        fill: currentcolor;
        font-family: "Google Sans", Roboto, Arial, sans-serif;
        font-size: 14px;
        font-weight: 500;
        height: 40px;
        justify-content: center;
        letter-spacing: .25px;
        line-height: normal;
        max-width: 100%;
        overflow: visible;
        padding: 2px 24px;
        position: relative;
        text-align: center;
        text-transform: none;
        transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: auto;
        will-change: transform, opacity;
        z-index: 0;
      }

      .btn-6:hover {
        background: #F6F9FE;
        color: #174ea6;
      }

      .btn-6:active {
        box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
        outline: none;
      }

      .btn-6:focus {
        outline: none;
        border: 2px solid #4285f4;
      }

      .btn-6:not(:disabled) {
        box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
      }

      .btn-6:not(:disabled):hover {
        box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
      }

      .btn-6:not(:disabled):focus {
        box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
      }

      .btn-6:not(:disabled):active {
        box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
      }

      .btn-6:disabled {
        box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
      }




      .btn-7 {
        appearance: button;
        background-color: #1899D6;
        border: solid transparent;
        border-radius: 16px;
        border-width: 0 0 4px;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;        /* display: inline-block; */
        font-family: din-round, sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .8px;
        line-height: 20px;
        outline: none;
        overflow: visible;
        padding: 5px 16px;
        text-align: center;
        text-transform: uppercase;
        touch-action: manipulation;
        transform: translateZ(0);
        transition: filter .2s;
        user-select: none;
        -webkit-user-select: none;
        vertical-align: middle;
        white-space: nowrap;
      }

      .btn-7:after {
        background-clip: padding-box;
        background-color: #1CB0F6;
        border: solid transparent;
        border-radius: 16px;
        border-width: 0 0 4px;
        bottom: -4px;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
      }

      .btn-7:main,
      .btn-7:focus {
        user-select: auto;
      }

      .btn-7:hover:not(:disabled) {
        filter: brightness(1.1);
        -webkit-filter: brightness(1.1);
      }

      .btn-7:disabled {
        cursor: auto;
      }


      .btn-8 {
        background-color: #fff000;
        border-radius: 12px;
        color: #000;
        cursor: pointer;
        font-weight: bold;
        padding: 10px 15px;
        text-align: center;
        transition: 200ms;
        box-sizing: border-box;
        border: 0;
        font-size: 16px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-8:not(:disabled):hover,
      .btn-8:not(:disabled):focus {
        outline: 0;
        background: #f4e603;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15);
      }

      .btn-8:disabled {
        filter: saturate(0.2) opacity(0.5);
        -webkit-filter: saturate(0.2) opacity(0.5);
        cursor: not-allowed;
      }


      .btn-9 {
        background-color: #c2fbd7;
        border-radius: 100px;
        box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset, rgba(44, 187, 99, .15) 0 1px 2px, rgba(44, 187, 99, .15) 0 2px 4px, rgba(44, 187, 99, .15) 0 4px 8px, rgba(44, 187, 99, .15) 0 8px 16px, rgba(44, 187, 99, .15) 0 16px 32px;
        color: green;
        cursor: pointer;
        display: inline-block;
        font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
        padding: 7px 20px;
        text-align: center;
        text-decoration: none;
        transition: all 250ms;
        border: 0;
        font-size: 16px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-9:hover {
        box-shadow: rgba(44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px;
        transform: scale(1.05) rotate(-1deg);
      }


      .btn-10 {
        background-color: #cf245f;
        background-image: linear-gradient(to bottom right, #ff557f, #ff557f, #aaaaff);
        border: 0;
        border-radius: .25rem;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 16px;        /* 18px */
        font-weight: 600;
        line-height: 40px;        /* 28px */
        text-align: center;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-10:hover {
        box-shadow: none;
      }

      @media (min-width: 1024px) {
        .btn-10 {
          font-size: 1.5rem;          /* 24px */
          /* padding: 1rem 1.5rem; */
          line-height: 40px;          /* 32px */
        }
      }





      .btn-11,
      .btn-11:after {
        width: 150px;
        height: 46px;
        line-height: 48px;
        font-size: 20px;
        font-family: 'Bebas Neue', sans-serif;
        background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
        border: 0;
        color: #fff;
        letter-spacing: 3px;
        box-shadow: 6px 0px 0px #00E6F6;
        outline: transparent;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-11:after {
        --slice-0: inset(50% 50% 50% 50%);
        --slice-1: inset(80% -6px 0 0);
        --slice-2: inset(50% -6px 30% 0);
        --slice-3: inset(10% -6px 85% 0);
        --slice-4: inset(40% -6px 43% 0);
        --slice-5: inset(80% -6px 5% 0);

        content: 'ALTERNATE TEXT';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
        text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
        clip-path: var(--slice-0);
      }

      .btn-11:hover:after {
        animation: 1s glitch;
        animation-timing-function: steps(2, end);
      }

      @keyframes glitch {        0% {
          clip-path: var(--slice-1);
          transform: translate(-20px, -10px);
        }        10% {
          clip-path: var(--slice-3);
          transform: translate(10px, 10px);
        }        20% {
          clip-path: var(--slice-1);
          transform: translate(-10px, 10px);
        }        30% {
          clip-path: var(--slice-3);
          transform: translate(0px, 5px);
        }        40% {
          clip-path: var(--slice-2);
          transform: translate(-5px, 0px);
        }        50% {
          clip-path: var(--slice-3);
          transform: translate(5px, 0px);
        }        60% {
          clip-path: var(--slice-4);
          transform: translate(5px, 10px);
        }        70% {
          clip-path: var(--slice-2);
          transform: translate(-10px, 10px);
        }        80% {
          clip-path: var(--slice-5);
          transform: translate(20px, -10px);
        }        90% {
          clip-path: var(--slice-1);
          transform: translate(-10px, 0px);
        }        100% {
          clip-path: var(--slice-1);
          transform: translate(0);
        }
      }

      @media (min-width: 768px) {

        .btn-11,
        .btn-11:after {
          width: 200px;
          height: 48px;
          line-height: 48px;
        }
      }



      .btn-12 {
        appearance: button;
        background-color: #000;
        background-image: none;
        border: 1px solid #000;
        border-radius: 4px;
        box-shadow: #fff 4px 4px 0 0, #000 4px 4px 0 1px;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-family: ITCAvantGardeStd-Bk, Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;        /* margin: 0 5px 10px 20px; */
        overflow: visible;
        padding: 12px 40px;
        text-align: center;
        text-transform: none;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        vertical-align: middle;
        white-space: nowrap;
      }

      .btn-12:focus {
        text-decoration: none;
      }

      .btn-12:hover {
        text-decoration: none;
      }

      .btn-12:active {
        box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
        outline: 0;
      }

      .btn-12:not([disabled]):active {
        box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px;
        transform: translate(2px, 2px);
      }

      @media (min-width: 768px) {
        .btn-12 {
          padding: 12px 50px;
        }
      }



      .btn-13 {
        align-items: center;
        appearance: none;
        border-radius: 4px;
        border-style: none;
        box-shadow: rgba(0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0 2px 2px 0, rgba(0, 0, 0, .12) 0 1px 5px 0;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-family: Roboto, sans-serif;
        font-size: .875rem;
        font-weight: 500;
        height: 36px;
        justify-content: center;
        letter-spacing: .0892857em;
        line-height: normal;
        min-width: 64px;
        outline: none;
        overflow: visible;
        padding: 0 16px;
        position: relative;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: middle;
        will-change: transform, opacity;
      }

      .btn-13:hover {
        box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
      }

      .btn-13:disabled {
        background-color: rgba(0, 0, 0, .12);
        box-shadow: rgba(0, 0, 0, .2) 0 0 0 0, rgba(0, 0, 0, .14) 0 0 0 0, rgba(0, 0, 0, .12) 0 0 0 0;
        color: rgba(0, 0, 0, .37);
        cursor: default;
        pointer-events: none;
      }

      .btn-13:not(:disabled) {
        background-color: #6200ee;
      }

      .btn-13:focus {
        box-shadow: rgba(0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
      }

      .btn-13:active {
        box-shadow: rgba(0, 0, 0, .2) 0 5px 5px -3px, rgba(0, 0, 0, .14) 0 8px 10px 1px, rgba(0, 0, 0, .12) 0 3px 14px 2px;
        background: #A46BF5;
      }




      .btn-14 {
        background-color: #0a6bff;
        border-radius: 4px;
        border: 0;
        box-shadow: rgba(1, 60, 136, .5) 0 -1px 3px 0 inset, rgba(0, 44, 97, .1) 0 3px 6px 0;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inherit;
        font-family: "Space Grotesk", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        min-height: 56px;
        min-width: 120px;
        padding: 16px 20px;
        position: relative;
        text-align: center;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: baseline;
        transition: all .2s cubic-bezier(.22, .61, .36, 1);
      }

      .btn-14:hover {
        background-color: #065dd8;
        transform: translateY(-2px);
      }

      @media (min-width: 768px) {
        .btn-14 {
          padding: 16px 44px;
          min-width: 150px;
        }
      }



      .btn-15 {
        appearance: none;
        backface-visibility: hidden;
        background-color: #27ae60;
        border-radius: 8px;
        border-style: none;
        box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-family: Inter, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: normal;
        line-height: 1.5;
        outline: none;
        overflow: hidden;
        padding: 13px 20px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transform: translate3d(0, 0, 0);
        transition: all .3s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: top;
        white-space: nowrap;
      }

      .btn-15:hover {
        background-color: #1e8449;
        opacity: 1;
        transform: translateY(0);
        transition-duration: .35s;
      }

      .btn-15:active {
        transform: translateY(2px);
        transition-duration: .35s;
      }

      .btn-15:hover {
        box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
      }




      .btn-16 {
        background-color: #3DD1E7;
        border: 0 solid #E5E7EB;
        box-sizing: border-box;
        color: #000000;
        display: flex;
        font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 700;
        justify-content: center;
        line-height: 1.75rem;
        padding: .75rem 1.65rem;
        position: relative;
        text-align: center;
        text-decoration: none #000000 solid;
        text-decoration-thickness: auto;
        width: 100%;
        max-width: 60px;
        position: relative;
        cursor: pointer;
        transform: rotate(-2deg);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-16:focus {
        outline: 0;
      }

      .btn-16:after {
        content: '';
        position: absolute;
        border: 1px solid #000000;
        bottom: 4px;
        left: 4px;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
      }

      .btn-16:hover:after {
        bottom: 2px;
        left: 2px;
      }

      @media (min-width: 768px) {
        .btn-16 {
          padding: .75rem 3rem;
          font-size: 1.25rem;
        }
      }






      .btn-17 {
        font-family: "Open Sans", sans-serif;
        font-size: 16px;
        letter-spacing: 2px;
        text-decoration: none;
        text-transform: uppercase;
        color: #000;
        cursor: pointer;
        border: 3px solid;
        padding: 0.25em 0.5em;
        box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-17:active {
        box-shadow: 0px 0px 0px 0px;
        top: 5px;
        left: 5px;
      }

      @media (min-width: 768px) {
        .btn-17 {
          padding: 0.25em 0.75em;
        }
      }



      .btn-18 {
        --b: 3px;        /* border thickness */
        --s: .45em;        /* size of the corner */
        --color: #373B44;

        padding: calc(.5em + var(--s)) calc(.9em + var(--s));
        color: var(--color);
        --_p: var(--s);
        background:
          conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
        transition: .3s linear, color 0s, background-color 0s;
        outline: var(--b) solid #0000;
        outline-offset: .6em;
        font-size: 16px;

        border: 0;

        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-18:hover,
      .btn-18:focus-visible {
        --_p: 0px;
        outline-color: var(--color);
        outline-offset: .05em;
      }

      .btn-18:active {
        background: var(--color);
        color: #fff;
      }



      .btn-19 {
        background-color: #fff;
        border: 0 solid #e2e8f0;
        border-radius: 1.5rem;
        box-sizing: border-box;
        color: #0d172a;
        cursor: pointer;
        display: inline-block;
        font-family: "Basier circle", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1;
        padding: 1rem 1.6rem;
        text-align: center;
        text-decoration: none #0d172a solid;
        text-decoration-thickness: auto;
        transition: all .1s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0px 1px 2px rgba(166, 175, 195, 0.25);
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-19:hover {
        background-color: #1e293b;
        color: #fff;
      }

      @media (min-width: 768px) {
        .btn-19 {
          font-size: 1.125rem;
          padding: 1rem 2rem;
        }
      }



      .btn-20 {
        --c: #fff;
        /* text color */
        background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%)/300% no-repeat,
          #004dff;
        /* background color */
        color: #0000;
        border: none;
        transform: perspective(500px) rotateY(calc(20deg*var(--_i, -1)));
        text-shadow: calc(var(--_i, -1)* 0.08em) -.01em 0 var(--c),
          calc(var(--_i, -1)*-0.08em) .01em 2px #0004;
        outline-offset: .1em;
        transition: 0.3s;
      }

      .btn-20:hover,
      .btn-20:focus-visible {
        --_p: 0%;
        --_i: 1;
      }

      .btn-20:active {
        text-shadow: none;
        color: var(--c);
        box-shadow: inset 0 0 9e9q #0005;
        transition: 0s;
      }

      .btn-20 {
        font-weight: bold;
        font-size: 2rem;
        cursor: pointer;
        padding: .1em .3em;
      }




      .btn-21 {
        background-color: #fbeee0;
        border: 2px solid #422800;
        border-radius: 30px;
        box-shadow: #422800 4px 4px 0 0;
        color: #422800;
        cursor: pointer;
        display: inline-block;
        font-weight: 600;
        font-size: 18px;
        padding: 0 18px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-21:hover {
        background-color: #fff;
      }

      .btn-21:active {
        box-shadow: #422800 2px 2px 0 0;
        transform: translate(2px, 2px);
      }

      @media (min-width: 768px) {
        .btn-21 {
          min-width: 120px;
          padding: 0 25px;
        }
      }



      .btn-22 {
        padding: 0.6em 2em;
        border: none;
        outline: none;
        color: rgb(255, 255, 255);
        background: #111;
        cursor: pointer;
        position: relative;
        z-index: 0;
        border-radius: 10px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }

      .btn-22:before {
        content: "";
        background: linear-gradient(45deg,            #ff0000,
            #ff7300,
            #fffb00,
            #48ff00,
            #00ffd5,
            #002bff,
            #7a00ff,
            #ff00c8,
            #ff0000);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing-button-85 20s linear infinite;
        transition: opacity 0.3s ease-in-out;
        border-radius: 10px;
      }

      @keyframes glowing-button-85 {        0% {
          background-position: 0 0;
        }        50% {
          background-position: 400% 0;
        }        100% {
          background-position: 0 0;
        }
      }

      .btn-22:after {
        z-index: -1;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: #222;
        left: 0;
        top: 0;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <button class="btn-1">Button1</button>
    <button class="btn-2">Button2</button>
    <button class="btn-3">Button3</button>
    <button class="btn-4">Button4</button>
    <button class="btn-5">Button5</button>
    <button class="btn-6">Button6</button>
    <button class="btn-7">Button7</button>
    <button class="btn-8">Button8</button>
    <button class="btn-9">Button9</button>
    <button class="btn-10">Button10</button>
    <button class="btn-11">Button11</button>
    <button class="btn-12">Button12</button>
    <button class="btn-13">Button13</button>
    <button class="btn-14">Button14</button>
    <button class="btn-15">Button15</button>
    <button class="btn-16">Button16</button>
    <button class="btn-17">Button17</button>
    <button class="btn-18">Button18</button>
    <button class="btn-19">Button19</button>
    <button class="btn-20">Button20</button>
    <button class="btn-21">Button21</button>
    <button class="btn-22">Button22</button>

  </body>
</html>