Free Buttons HTML and CSS styles - brighttrigger button

        <a class="brighttrigger" href="javascript:void(0)">
  <span class="brighttrigger-content-wrapper">
    <span class="brighttrigger-text">Sign up for Free</span>
  </span>
</a>

<style>
  *, ::after, ::before {
    box-sizing: border-box;
  }

  a {
    box-shadow: none;
    text-decoration: none;
  }

  @media (max-width: 767px) {
    .brighttrigger {
      width: auto;
    }
  }

  .brighttrigger {
    display: inline-block;
    text-align: center;
    transition: all;
    transition-behavior: normal;
  }

  .brighttrigger:visited {
    color: #fff;
  }

  .brighttrigger-content-wrapper {
    column-gap: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    row-gap: 5px;
  }

  .brighttrigger-text {
    display: inline-block;
  }

  .brighttrigger span {
    text-decoration: inherit;
  }

  .brighttrigger:focus, .brighttrigger:hover {
    background-color: #ff7520;
    border-style: none;
    color: #fff;
  }

  .brighttrigger {
    background-image: linear-gradient(90deg, #ffbf00 0, #ff7520 100%);
    border-radius: 120px;
    border-style: none;
    color: #fff;
    transition-duration: .3s;
    fill: #fff;
    background-color: transparent;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    padding: 12px 16px;
  }

  @media (max-width: 1024px) {
    .brighttrigger {
      padding: 11px 16px;
    }
  }

  @media (max-width: 767px) {
    .brighttrigger {
      padding: 4.3% 0;
    }
  }

  .brighttrigger {
    overflow: hidden;
  }

  .brighttrigger::before {
    background-color: initial;
    background-image: linear-gradient(90deg, #ff512f, #ffbf00);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .5s ease-in-out;
    transition-behavior: normal;
    width: 100%;
    z-index: 0;
  }

  .brighttrigger:hover::before {
    opacity: 1;
  }

  .brighttrigger, .brighttrigger * {
    position: relative;
    z-index: 1;
  }

  .brighttrigger:active::before {
    background-attachment: initial !important;
    background-clip: initial !important;
    background-color: #ffc518 !important;
    background-image: initial !important;
    background-origin: initial !important;
    background-position: initial initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
    color: #2f3241 !important;
  }

  .brighttrigger:active span {
    color: #2f3241 !important;
  }
</style>
Bright Trigger

Ask changes to AI:
