Free Buttons HTML and CSS styles

<button class="inkpulse">
  <svg fill="none" viewBox="0 0 32 33" width="24">
    <path fill="#fff" d="M12.531 24.84c.177-.032.379.027.782.145l.095.028c.403.118.605.178.736.301.115.11.193.251.222.407.034.177-.026.379-.144.782l-.028.096c-.119.402-.178.605-.301.736a.752.752 0 0 1-.408.22c-.176.034-.378-.025-.78-.143l-.097-.028c-.402-.119-.604-.178-.735-.302a.75.75 0 0 1-.223-.406c-.033-.177.027-.379.145-.781l.027-.096c.119-.403.179-.606.302-.736a.751.751 0 0 1 .407-.222Zm6.942 0c.155.03.298.107.407.223.123.13.183.333.3.736l.028.096c.118.402.179.604.146.78a.75.75 0 0 1-.223.407c-.13.124-.333.183-.736.302l-.096.028c-.402.118-.604.177-.78.144a.752.752 0 0 1-.408-.222c-.123-.13-.183-.332-.301-.735l-.029-.096c-.118-.403-.176-.605-.143-.782a.75.75 0 0 1 .222-.407c.131-.123.332-.182.735-.3l.096-.029c.403-.118.605-.177.782-.144Zm-3.427-1.957c.42 0 .63 0 .791.082.14.072.255.187.327.328.082.16.082.37.082.79v.1c0 .42 0 .631-.082.792a.752.752 0 0 1-.327.327c-.16.081-.371.08-.791.08h-.1c-.419 0-.63.001-.79-.08a.755.755 0 0 1-.328-.33c-.081-.16-.082-.37-.082-.79v-.099c0-.42 0-.63.082-.79a.752.752 0 0 1 .328-.328c.16-.082.37-.082.79-.082h.1Zm-8.204-1.355a.753.753 0 0 1 .463.035c.166.067.304.225.579.543l.065.075c.275.317.413.476.456.651a.751.751 0 0 1-.032.462c-.068.167-.227.305-.545.58l-.075.065c-.317.274-.477.413-.651.456a.75.75 0 0 1-.462-.033c-.167-.067-.305-.227-.58-.545l-.066-.075c-.274-.317-.412-.476-.455-.65a.75.75 0 0 1 .032-.462c.068-.167.227-.305.544-.58l.076-.066c.317-.274.476-.412.65-.456Zm16.32 0c.174.044.333.181.65.456l.076.066c.317.275.477.412.545.579.06.147.07.31.032.463-.043.174-.181.334-.456.651l-.066.075c-.274.317-.412.476-.579.543a.75.75 0 0 1-.462.034c-.174-.043-.335-.18-.652-.456l-.075-.065c-.317-.275-.476-.413-.544-.58a.75.75 0 0 1-.032-.462c.043-.175.18-.334.455-.651l.065-.076c.275-.317.413-.476.58-.544a.75.75 0 0 1 .462-.033Zm-3.697-.122a.751.751 0 0 1 .452.099c.155.09.27.268.496.621l.055.084c.227.353.34.53.358.71a.751.751 0 0 1-.097.452c-.091.155-.27.27-.622.496l-.084.054c-.354.227-.53.341-.71.36a.751.751 0 0 1-.453-.1c-.155-.091-.269-.268-.496-.62l-.053-.085c-.227-.352-.342-.53-.36-.708a.752.752 0 0 1 .1-.454c.09-.155.267-.269.62-.496l.084-.054c.353-.227.53-.34.71-.359Zm-8.937 0c.18.018.356.132.71.359l.083.053c.354.227.532.341.623.496a.75.75 0 0 1 .097.454c-.018.179-.132.355-.36.709l-.053.084c-.227.352-.34.53-.496.62a.75.75 0 0 1-.452.1c-.18-.019-.357-.133-.71-.36l-.084-.054c-.353-.227-.53-.34-.621-.496a.752.752 0 0 1-.098-.453c.018-.179.132-.356.358-.709l.054-.084c.227-.353.34-.53.496-.621a.753.753 0 0 1 .453-.098Zm11.58-3.433c.18-.008.372.08.753.254l.091.04c.382.175.574.263.686.404a.751.751 0 0 1 .162.434c.008.18-.08.37-.255.752l-.042.091c-.174.382-.262.574-.402.686a.753.753 0 0 1-.435.162c-.18.007-.371-.08-.753-.255l-.09-.041c-.382-.174-.573-.262-.685-.402a.751.751 0 0 1-.162-.435c-.008-.18.08-.371.254-.753l.04-.09c.175-.383.263-.574.404-.686a.751.751 0 0 1 .434-.161ZM8.885 17.97c.158.006.31.064.434.162.141.112.228.304.403.685l.042.091c.174.382.262.574.255.754a.752.752 0 0 1-.163.434c-.112.14-.303.228-.685.402l-.09.041c-.383.174-.575.262-.755.255a.75.75 0 0 1-.433-.162c-.141-.112-.228-.304-.403-.686l-.042-.09c-.174-.383-.261-.574-.254-.753a.752.752 0 0 1 .163-.435c.112-.14.304-.228.685-.402l.09-.042c.381-.175.573-.262.753-.254Zm-3.528-1.7c.415-.06.623-.089.793-.03.15.05.28.148.372.278.103.147.133.354.193.77l.015.098c.06.415.089.624.03.795a.75.75 0 0 1-.276.37c-.148.105-.356.134-.772.194l-.099.014c-.415.06-.623.09-.794.032a.751.751 0 0 1-.37-.277c-.104-.148-.134-.356-.194-.772l-.015-.098c-.06-.416-.089-.624-.03-.794a.75.75 0 0 1 .276-.371c.148-.104.356-.135.772-.195l.099-.014Zm20.496-.032c.17-.058.379-.027.795.032l.098.015c.416.06.625.089.772.192a.75.75 0 0 1 .276.373c.058.17.029.378-.031.794l-.014.098c-.06.416-.09.623-.194.77a.75.75 0 0 1-.37.279c-.17.058-.38.028-.795-.031l-.099-.015c-.415-.06-.623-.09-.77-.193a.751.751 0 0 1-.278-.371c-.058-.17-.028-.379.032-.794l.013-.099c.06-.416.09-.624.195-.771a.75.75 0 0 1 .37-.279Zm-1.943-2.63c.416-.06.625-.09.795-.033.15.051.28.149.371.277.104.148.133.357.193.772l.014.1c.06.415.09.623.032.794a.753.753 0 0 1-.278.37c-.147.104-.355.134-.77.194l-.1.014c-.415.06-.623.09-.793.032a.754.754 0 0 1-.372-.278c-.104-.148-.133-.356-.192-.77l-.015-.1c-.06-.415-.09-.624-.032-.794a.753.753 0 0 1 .278-.372c.147-.103.355-.132.77-.192l.1-.015Zm-16.62-.034c.17-.057.379-.027.793.032l.1.014c.415.06.623.09.77.194.13.09.226.221.278.37.057.17.028.38-.032.794l-.014.1c-.06.415-.09.624-.194.772a.751.751 0 0 1-.37.276c-.171.058-.38.029-.795-.031l-.098-.015c-.416-.06-.625-.09-.772-.193a.75.75 0 0 1-.277-.37c-.058-.17-.028-.38.032-.795l.014-.099c.06-.415.09-.623.193-.77a.754.754 0 0 1 .372-.279Zm-1.232-3.397c.18-.008.37.08.753.255l.09.04c.383.175.574.263.686.404a.75.75 0 0 1 .161.434c.008.18-.079.371-.253.752l-.042.091c-.174.382-.262.574-.403.686a.75.75 0 0 1-.434.163c-.18.008-.37-.08-.753-.255l-.09-.042c-.382-.174-.574-.261-.686-.402a.752.752 0 0 1-.162-.435c-.008-.18.08-.371.255-.753l.04-.09c.175-.382.262-.573.403-.685a.754.754 0 0 1 .435-.163Zm19.888 0c.158.007.31.064.434.162.141.112.229.303.403.685l.041.091c.175.382.262.573.254.753a.75.75 0 0 1-.16.435c-.113.14-.304.229-.686.403l-.091.041c-.382.175-.574.262-.754.254a.75.75 0 0 1-.434-.162c-.14-.112-.229-.303-.403-.685l-.041-.09c-.175-.383-.262-.575-.254-.755a.75.75 0 0 1 .161-.434c.112-.141.305-.228.687-.402l.09-.041c.382-.175.573-.263.753-.255ZM9.987 9.254c.175.043.334.181.65.456l.076.065c.317.275.476.413.544.58.06.146.071.309.033.462-.043.175-.181.334-.456.65l-.065.076c-.275.317-.413.477-.58.545a.753.753 0 0 1-.462.032c-.175-.043-.334-.181-.65-.456L9 11.6c-.317-.275-.477-.413-.545-.58a.752.752 0 0 1-.033-.461c.043-.175.182-.334.457-.652l.065-.075c.275-.317.413-.476.58-.544a.753.753 0 0 1 .462-.033Zm12.022 0a.75.75 0 0 1 .46.033c.168.068.306.228.58.545l.066.075c.275.317.413.476.456.65a.753.753 0 0 1-.034.463c-.068.167-.227.305-.544.58l-.075.066c-.317.274-.476.412-.65.455a.753.753 0 0 1-.463-.033c-.167-.068-.305-.227-.58-.544l-.065-.075c-.275-.318-.413-.477-.456-.652a.75.75 0 0 1 .033-.462c.068-.166.227-.304.544-.579l.076-.065c.317-.275.477-.413.652-.456Zm-7.823-2.4c.155.03.298.108.407.223.123.131.182.333.3.736l.029.095c.118.403.178.605.144.781a.752.752 0 0 1-.222.408c-.131.123-.333.182-.736.3l-.095.029c-.403.118-.605.177-.782.144a.751.751 0 0 1-.407-.222c-.123-.131-.182-.333-.3-.736l-.029-.095c-.118-.403-.178-.606-.144-.783a.75.75 0 0 1 .221-.406c.131-.123.334-.182.737-.3l.095-.029c.403-.118.605-.178.782-.145Zm3.623 0c.177-.033.38.028.782.146l.096.027c.402.119.604.178.735.301a.754.754 0 0 1 .223.407c.033.177-.027.38-.145.782l-.028.096c-.118.403-.178.605-.301.736a.753.753 0 0 1-.407.221c-.177.033-.379-.026-.781-.144l-.096-.028c-.403-.118-.606-.178-.736-.301a.751.751 0 0 1-.222-.408c-.033-.176.026-.378.144-.78l.029-.096c.118-.403.177-.606.3-.737a.752.752 0 0 1 .407-.222ZM10.333 5.63a.75.75 0 0 1 .452.098c.156.09.27.267.497.62l.054.085c.227.353.34.53.358.71a.75.75 0 0 1-.098.452c-.091.155-.267.269-.62.496l-.084.054c-.354.227-.531.341-.71.359a.752.752 0 0 1-.453-.099c-.156-.09-.269-.268-.495-.62L9.179 7.7c-.227-.353-.342-.53-.36-.709a.752.752 0 0 1 .1-.453c.09-.155.268-.269.621-.496l.084-.054c.353-.227.53-.34.71-.358Zm11.337 0c.18.018.357.131.71.358l.084.054c.353.227.53.34.62.496.08.137.115.296.1.453-.018.18-.132.356-.359.71l-.054.083c-.227.353-.341.53-.497.621a.75.75 0 0 1-.453.098c-.179-.018-.356-.13-.709-.357l-.084-.054c-.353-.227-.53-.342-.62-.497a.752.752 0 0 1-.1-.453c.019-.18.133-.356.36-.71l.054-.083c.227-.353.34-.53.496-.621a.75.75 0 0 1 .452-.098Zm-5.618-1.5c.42 0 .63 0 .79.082a.75.75 0 0 1 .328.327c.082.16.082.371.082.791v.1c0 .42 0 .63-.082.79a.75.75 0 0 1-.328.328c-.16.082-.37.082-.79.082h-.1c-.42 0-.63 0-.79-.082a.75.75 0 0 1-.329-.327c-.082-.16-.08-.371-.08-.791v-.1c0-.42-.002-.63.08-.79a.75.75 0 0 1 .328-.328c.16-.082.371-.082.791-.082h.1Z"></path>
  </svg>
  Start now
</button>

<style>
  :root {
    --theme_button-filter-primary: none;
    --theme_button-background-primary: #1B61C9;
    --theme_button-filter-primary-hover: none;
    --theme_button-text-primary-hover: #ffffff;
    --theme_button-background-primary-hover: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), #254faD;
    --theme_button-filter-primary-active: none;
    --theme_button-shadow-primary-active: 0px 0px 1px rgba(0, 0, 0, 0.32), 0px 0px 3px rgba(0, 0, 0, 0.11), 0px 1px 4px rgba(45, 127, 249, 0.48), inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    --theme_button-text-primary-active: #ffffff;
    --theme_button-background-primary-active: #1A3866;
    --theme_button-filter-primary-focus: none;
    --theme_button-text-primary-focus: #ffffff;
    --theme_button-background-primary-focus: #254faD;
    --theme_button-filter-primary-disabled: none;
    --theme_button-shadow-primary-disabled: inset 0 0 0 1px #9297A0;
    --theme_button-background-primary-disabled: #E0E2E6;
    --theme_button-shadow-primary-focus: 0px 0px 0px 2px rgba(7, 104, 248, 0.5), 0px 0px 1px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 1px 3px rgba(45, 127, 249, 0.28), inset 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06), inset 0 0 0 1px #ffffff;
  }

  .inkpulse svg {
    vertical-align: middle;
  }

  .inkpulse:focus:not(:focus-visible) {
    outline: 0;
  }

  .inkpulse:not(:disabled) {
    cursor: pointer;
  }

  .inkpulse {
    box-sizing: border-box;
    cursor: pointer;
    font-family: Haas, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    justify-content: center;
    margin: 0;
    outline: 0;
    position: relative;
    text-align: center;
    appearance: button;
    text-transform: none;
    font-weight: 500 !important;
    backdrop-filter: var(--theme_button-filter-primary);
    background: var(--theme_button-background-primary);
    letter-spacing: .01em;
    line-height: 1.35;
    border-radius: 32px;
    column-gap: 8px;
    display: inline-flex;
    padding: 12px 24px 12px 16px;
    row-gap: 8px;
    width: 100% !important;
    background-color: #181d26 !important;
    border: 1px solid #181d26;
    box-shadow: none;
    color: #fff !important;
    align-items: center;
    font-size: 1rem;
    min-width: fit-content !important;
  }

  @media screen and (prefers-reduced-motion:no-preference) {
    .inkpulse {
      transition-duration: .15s;
      transition-timing-function: ease-in;
    }
  }

  .inkpulse:hover {
    backdrop-filter: var(--theme_button-filter-primary-hover);
    background: var(--theme_button-background-primary-hover);
    color: var(--theme_button-text-primary-hover);
    box-shadow: none;
  }

  .inkpulse:focus, .inkpulse:focus-visible {
    backdrop-filter: var(--theme_button-filter-primary-focus);
    background: var(--theme_button-background-primary-focus);
    color: var(--theme_button-text-primary-focus);
  }

  .inkpulse:focus-visible {
    background-repeat: repeat;
    box-shadow: var(--theme_button-shadow-primary-focus);
  }

  .inkpulse:active {
    backdrop-filter: var(--theme_button-filter-primary-active);
    background: var(--theme_button-background-primary-active);
    box-shadow: var(--theme_button-shadow-primary-active);
    color: var(--theme_button-text-primary-active);
    background-color: rgba(7, 12, 20, .82) !important;
    border-color: rgba(7, 12, 20, .82) !important;
  }

  .inkpulse:disabled {
    backdrop-filter: var(--theme_button-filter-primary-disabled);
    background: var(--theme_button-background-primary-disabled);
    box-shadow: var(--theme_button-shadow-primary-disabled);
    pointer-events: none;
    background-color: rgba(1, 20, 53, .12) !important;
    border: thin solid rgba(1, 20, 53, .12) !important;
    border-image: initial initial initial initial initial !important;
    color: rgba(2, 13, 32, .43) !important;
  }

  @media screen and (prefers-reduced-motion:no-preference) {
    .inkpulse {
      transition: all .2s linear;
      transition-behavior: normal;
    }
  }

  .inkpulse:focus {
    background-color: #181d26;
    box-shadow: #fff 0 0 0 2px, rgba(153, 160, 174, .16) 0 0 0 4px;
  }

  @media screen and (min-width: 768px) {
    .inkpulse {
      letter-spacing: .01em;
      line-height: 1.35;
      width: fit-content !important;
    }
  }

  @media screen and (min-width: 1024px) {
    .inkpulse {
      letter-spacing: .005em;
      line-height: 1.35;
    }
  }

  @media screen and (min-width: 1664px) {
    .inkpulse {
      letter-spacing: .005em;
      line-height: 1.3;
    }
  }

  .inkpulse:active, .inkpulse:hover {
    background-color: rgba(4, 14, 32, .69) !important;
    border: 1px solid rgba(4, 14, 32, .69) !important;
    border-image: initial initial initial initial initial !important;
  }

  .inkpulse:disabled path {
    fill: rgba(2, 13, 32, .43);
  }
</style>
Ink Pulse

Characteristics:
