Free Buttons HTML and CSS styles

        <a class="fieryedge" href="javascript:void(0)">
  <span class="fieryedge-btn-wrapper">
    <span class="fieryedge-btn-text">Documentation</span>
  </span>
</a>

<style>
  .fieryedge {
    display: inline-block;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px !important;
    line-height: 14px;
    padding: 12px 16px;
    color: #fff;
    background-color: transparent;
    border: 2px solid;
    border-image: linear-gradient(90deg, #fbb604, #c44d32) 1;
    border-radius: 120px;
    fill: #fff;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    text-decoration: none;
    background-image: none;
  }

  .fieryedge::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    background-image: linear-gradient(90deg, #fbb604, #c44d32);
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    mask-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    mask-composite: exclude;
  }

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

  .fieryedge-btn-text {
    font-weight: 700;
    display: inline-block;
    background-clip: text;
    background-image: linear-gradient(90deg, #c34c32, #ffbf00);
    color: transparent;
    transition: all 0.3s ease-in-out;
  }

  .fieryedge:hover .fieryedge-btn-text {
    background-image: linear-gradient(90deg, #ffbf00, #ff512f) !important;
  }

  .fieryedge:hover {
    background-color: #fff;
  }

  .fieryedge:active {
    background-image: linear-gradient(90deg, #c44d32, #fbb604);
    overflow: hidden;
    z-index: 10;
  }

  .fieryedge:active .fieryedge-btn-text {
    background-image: linear-gradient(90deg, #c44d32, #fbb604) !important;
    color: #fff !important;
    transition: all 0.4s ease-in-out;
  }

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

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

  @media (min-width: 1300px) {
    .fieryedge {
      font-size: 16px !important;
      transition: all cubic-bezier(.25, .46, .45, .94);
    }

    .fieryedge::before {
      background-image: linear-gradient(90deg, #fbb604, #c44d32);
    }

    .fieryedge-btn-text {
      background-image: linear-gradient(90deg, #c34c32, #ffbf00);
    }
  }
</style>
Fiery Edge

Ask changes to AI:
